欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

修改浏览器滚动条样式

程序员文章站 2022-03-29 22:47:47
...

修改浏览器滚动条样式

因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决,但总的来说css仍然有点局限，那必然就会有js方法去实现，今天我们会对css控制和js控制滚动条样式进行一个全面的总结。
假设：在使用js修改浏览器样式的时候，是通过手动重新画了滚动条，而不是原生的滚动条

一：webkit的CSS设置滚动条

1.1 主要有下面7个属性
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track  外层轨道
::-webkit-scrollbar-track-piece  内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义拖动块的样式

如下面代码，我们进行对窗口中滚动条进行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::-webkit-scrollbar
        {
            width: 16px;
            height: 16px;
            background-color: #7af5cf;/*//背景色*/
        }

        /*定义滚动条轨道 内阴影+圆角*//* 滚动槽 */
        ::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 10px;
            background-color: #4e3cf5;/*滚动条槽的颜色*/
        }

        /*定义滑块 内阴影+圆角*//* 滚动条滑块 */
        ::-webkit-scrollbar-thumb
        {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #555;
        }
        /*交互时样式设置*/
        ::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(157, 178, 255, 0.82);
            width: 10px;
            height: 10px;
            border: 6px;
        }
        /* 两边按钮设置*/
        ::-webkit-scrollbar-button {
            width: 10px;
            height: 10px;
            border: 2px;
            background: #d3b71d;
        }
        ::-webkit-scrollbar-button:horizontal:decrement:hover {
            /*当鼠标在水平滚动条递减属性的按钮上的状态，在该文件中就只有水平方向的第一个按钮*/
            /* decrement 表示递减的碎片 */
            width: 10px;
            height: 10px;
            border: 6px;
            background: #d3150b;
        }
        /*内层轨道，滚动条中间部分（除去）,滚动槽颜色可能会遮挡该颜色*/
        ::-webkit-scrollbar-track-piece {
            /*background: #29d32f;*/
        }
        /*两个滚动条的交汇处*/
        ::-webkit-scrollbar-corner {
            width: 10px;
            height: 10px;
            border: 2px;
            background: #bdd39b;
        }

        ::-webkit-scrollbar-track-piece:start {
            /*滚动条上半边或左半边*/
            width: 10px;
            height: 10px;
            border: 2px;
            background: #d1a2d3;
        }
        /*----*/
        /* 定义div布局 */
        .container {
            height: 400px;
            width: 300px;
            border: 1px solid darkred;
            overflow: auto;
        }
        .child1 {
            height: 700px;
            width: 700px;
            border: 1px solid #6c8b40;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="child1"></div>
</div>
</body>
</html>

如上面代码，是对页面属性的测试，结果如下图所示，通过颜色进行区分各个属性的功能，你需要做的只是在功能区填写css样式，就可以了：
修改浏览器滚动条样式

1.2 详细设置

定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？
伪类大家应该很熟悉:link,:focus,:hover，此外CSS3中又增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after。那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个：也就是现在变成了::first-letter,::first-line,::before,::after，另外CSS3还增加了一个::selection。两个：：和一个：在css3中主要用来区分伪类和伪元素。

webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。

任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。

:horizontal
//horizontal伪类适用于任何水平方向上的滚动条
:vertical
//vertical伪类适用于任何垂直方向的滚动条
:decrement
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
:increment
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
:start
//start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面
:end
//end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面
:double-button
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button
no-button伪类表示轨道结束的位置没有按钮。
:corner-present
//corner-present伪类表示滚动条的角落是否存在。
:window-inactive
//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

上面就是对滚动条属性的详细设置，如下面代码，就是对伪类:start的使用

        ::-webkit-scrollbar-track-piece:start {
            /*滚动条上半边或左半边*/
            width: 10px;
            height: 10px;
            border: 2px;
            background: #d1a2d3;
        }

如下面代码，就是对伪类:horizontal，:decrement，:hover 的使用

        ::-webkit-scrollbar-button:horizontal:decrement:hover {
            /*当鼠标在水平滚动条递减属性的按钮上的状态，在该文件中就只有水平方向的第一个按钮*/
            /* decrement 表示递减的碎片 */
            width: 10px;
            height: 10px;
            border: 6px;
            background: #d3150b;
        }

其他的使用可参见文章：https://www.cnblogs.com/520yang/articles/5098352.html
demo:http://www.xuanfengge.com/demo/201311/scroll/css3-scroll.html

二：IE下面的CSS设置滚动条

IE下面就比较简单那了，自定义的项目比较少，全是对颜色的设置。

scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/

百度经验

三： 使用jquery进行自定义滚动条样式

为了一致的用户体验，有时我们就不得不放弃使用部分浏览器提供的CSS接口来定制滚动条，转而寻求更佳的代替方案。
其中的一中方案是使用jQuery插件，jquery-custom-content-scroller。
要是您想了解jQuery-custom-content-scroller的具体使用方法，请移步到：
官网地址： http://manos.malihu.gr/jquery-custom-content-scroller/
github地址：github地址
下面我就jQuery滚动条插件的使用作一下简单介绍：
第一步：在内容的顶部引入滚动条相应的样式表文件和jquery的库文件，jquery插件jquery.mcustomscrollbar文件。

    <link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.min.css" >
    <script src="./jquery-1.9.1.min.js"></script>
    <script src="./jquery.mCustomScrollbar.concat.min.js"></script>

第二步：在要显示滚动条的元素（元素内容中必须要有溢出的块，否则就不会出现滚动条）上面，加入class=”container”，然后再加入以下代码：

<script>
  (function($){
    $(window).load(function(){
      $(".container").mCustomScrollbar(
        {
          axis:"yx", // horizontal scrollbar,设置水平和垂直
          theme:"dark" //设置滚动条主题
        }
      );
    });
  })(jQuery);
</script>

值得注意的是：在这里需要我们自己去下载jquery和其他要引入的插件
，当然最好的方法是下载链接处下载：
https://github.com/malihu/malihu-custom-scrollbar-plugin/archive/master.zip

在这个包里边包含了压缩和未压缩的插件包、插件css、jquery,只要复制到同一级文件下引入即可
完整代码如下所示： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.min.css" >
    <script src="./jquery-1.9.1.min.js"></script>
    <script src="jquery.mCustomScrollbar.concat.min.js"></script>
    <style>
        /*----*/
        /* 定义div布局 */
        .container {
            height: 400px;
            width: 300px;
            border: 1px solid darkred;
            overflow: auto;
        }
        .child1 {
            height: 700px;
            width: 700px;
            border: 1px solid #6c8b40;
        }
    </style>
</head>
<script>
  (function($){
    $(window).load(function(){
      $(".container").mCustomScrollbar(
        {
          axis:"yx", // horizontal scrollbar,设置水平和垂直
          theme:"dark" //设置滚动条主题
        }
      );
    });
  })(jQuery);
</script>
<body>
<div class="container">
    <div class="child1"></div>
</div>
</body>
</html>

在火狐浏览器中效果如下所示：
修改浏览器滚动条样式
在谷歌中如下所示：
修改浏览器滚动条样式
从上面代码中我们可以看出，我们只需要通过给mCustomScrollbar
方法传递参数对象即可修改滚动条的样式，那么都有哪些配置呢？如下面介绍：

3.1 Configuration

你能够配置你的滚动条通过传递参数的方式，用法如下所示：
Usage $(selector).mCustomScrollbar({ option: value });

语法 说明
setWidth: false 设置您的内容的宽度（覆盖CSS宽度），在像素值（整数）或百分比（字符串）。
setHeight: false 设置您的内容的高度（覆盖CSS高度），在像素值（整数）或百分比（字符串）。
setTop: 0 设置内容的初始CSS*属性，接受字符串值（CSS顶部位置）。例如：置顶：“100px”。
setLeft: 0 设置内容的初始CSS左属性，接受字符串值（CSS左位置）。例如：setleft：“100px”。
axis: “string” 定义内容的滚动轴（的滚动条类型添加到水平、垂直和/元素：）。有效值：“Y”、“X”、“Y”。

还有一些其他的属性配置，在这里就不意义介绍了，可参见
其他属性配置： http://manos.malihu.gr/jquery-custom-content-scroller/#configuration-section

3.2 Plugin methods

插件方法也有多个，比如

update

Usage $(selector).mCustomScrollbar(“update”);
调用Update方法手动更新现有的滚动条来容纳新的内容或调整大小的元素（S）。这种方法是通过默认的脚本自动调用（通过updateoncontentresize选项）当元素本身，其内容或滚动条大小的变化。

scrollTo

用法：$(selector).mCustomScrollbar(“scrollTo”,position);
你可以使用这个方法自动的滚动到你想要滚动到的位置。这个位置可以使用字符串（例如 “#element-id”，“bottom” 等）描述或者是一个数值（像素单位）。
下面的例子将会滚动到最下面的对象

$(“.content”).mCustomScrollbar(“scrollTo”,”last”);

scrollTo 方法的参数

$(selector).mCustomScrollbar(“scrollTo”,String); | 滚动到某个对象的位置，字符串型的值可以是 id 或者 class 的名字
$(selector).mCustomScrollbar(“scrollTo”,”top”); | 滚动到顶部（垂直滚动条）
$(selector).mCustomScrollbar(“scrollTo”,”bottom”); | 滚动到底部（垂直滚动条）
$(selector).mCustomScrollbar(“scrollTo”,”left”); | 滚动到最左边（水平滚动条）
$(selector).mCustomScrollbar(“scrollTo”,”right”); | 滚动到最右边（水平滚动条
$(selector).mCustomScrollbar(“scrollTo”,”first”); | 滚动到内容区域中的第一个对象位置
$(selector).mCustomScrollbar(“scrollTo”,”last”); | 滚动到内容区域中的最后一个对象位置
$(selector).mCustomScrollbar(“scrollTo”,Integer); | 滚动到某个位置（像素单位）

scrollTo 方法还有两个额外的选项参数
moveDragger: Boolean | 滚动滚动条的滑块到某个位置像素单位，值：true，flase。
例如：

$(selector).mCustomScrollbar(“scrollTo”,200,{ moveDragger:true });

callback：Boolean | 执行回调函数当 scroll-to 完成之后，值：true，false
例如：

$(selector).mCustomScrollbar(“scrollTo”,200,{ callback:true });
disable

用法：$(selector).mCustomScrollbar(“disable”);
调用 disable 方法去使滚动条不可用。如果想使其重新可用，调用 update方法。disable 方法使用一个可选参数（默认 false）你可以设置 true 如果你想重新让内容区域滚动当 scrollbar 不可用时。
例如：

$(“.content”).mCustomScrollbar(“disable”,true);
destroy

用法：$(selector).mCustomScrollbar(“destroy”);
调用 destroy 方法可以移除某个对象的自定义滚动条并且恢复默认样式

3.3 Scrollbar styling & themes

当然，我们最注意的是样式的改变，如下面说明：
对于样式，我们既能够使用插件的样式，也能够进行自定义样式
######1）：使用插件本身的只需直接使用即可，如下面代码;

$(selector).mCustomScrollbar({
  theme:"dark"
});

具体的主题效果可以查看这里主题效果，然后将名称改变即可
######2）：自定义主题效果
如下所示创建主题my-scroll-css.css并修改配置调用地方的主题名称。

$(selector).mCustomScrollbar({
    theme:"my-scroll-css"
});

在my-scroll-css.css样式中书写如下代码：
在使用的时候，需要将这个css样式导入到所使用的文件中
<link rel="stylesheet" type="text/css" href="my-scroll-css.css" >

.mCS-my-scroll-css.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }
.mCS-my-scroll-css.mCSB_scrollTools .mCSB_draggerRail{ background-color: #93ff85; }

如上面代码所示，在第一行中代码.mCS-my-scroll-css.mCSB_scrollTools中的my-scroll-css 就是我们自定义的主题名，也就是mCustomScrollbar中theme后面的值。
修改后效果如下所示：
修改浏览器滚动条样式
同样，我们可以复制官方的样式进行自己的修改。
具体参数如下说明：
修改浏览器滚动条样式

3.4 在其他框架中使用

安装

npm: npm install malihu-custom-scrollbar-plugin

Bower: bower install malihu-custom-scrollbar-plugin

如何使用

Manual: $(selector).mCustomScrollbar();

Browserify: 

var $ = require('jquery');
require('malihu-custom-scrollbar-plugin')($);

webpack: 

npm install imports-loader
npm install jquery-mousewheel
npm install malihu-custom-scrollbar-plugin

module.exports = {
    module: {
        loaders: [
            { test: /jquery-mousewheel/, loader: "imports?define=>false&this=>window" },
            { test: /malihu-custom-scrollbar-plugin/, loader: "imports?define=>false&this=>window" }
        ]
    }
};

var $ = require('jquery');
require("jquery-mousewheel")($);
require('malihu-custom-scrollbar-plugin')($);

要求：

jQuery version 1.6.0 or higher

浏览器兼容性

  • Internet Explorer 8+
  • Firefox
  • Chrome
  • Opera
  • Safari
  • iOS
  • Android
  • Windows Phone

还有其他许多许多插件去修改滚动条：jquery自定义滚动条总结

相关标签： webkit 浏览器 js scroller

上一篇： css修改谷歌浏览器和火狐浏览器的滚动条样式

下一篇： docker之dockerfile构建镜像

推荐阅读