修改浏览器滚动条样式

最新推荐文章于 2024-02-20 15:50:58 发布

suwu150

最新推荐文章于 2024-02-20 15:50:58 发布

阅读量4.8k

点赞数 4

分类专栏： webpack CSS React JavaScript 文章标签： webkit 浏览器 js scroller

本文链接：https://blog.csdn.net/suwu150/article/details/78923390

版权

JavaScript 同时被 3 个专栏收录

56 篇文章 4 订阅

订阅专栏

React

14 篇文章 6 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

修改浏览器滚动条样式

因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的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>

在火狐浏览器中效果如下所示：
jquery火狐效果
在谷歌中如下所示：
jquery谷歌浏览器效果
从上面代码中我们可以看出，我们只需要通过给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自定义滚动条总结

suwu150

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
修改浏览器滚动条样式

CSS设置滚动条样式因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决。比如网易邮箱的滚动条样子很好看，就是利用的CSS来设置的，而且是webkit浏览器的。一：webkit的CSS设置滚动条1.1 主要有下面7个属性::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的::-webkit-scrollbar-butto
复制链接

扫一扫