mCustomScrollbar定制统一的滚动条

乐之者java

于 2020-04-24 23:47:05 发布

阅读量290

点赞数

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/105742433

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

搞前端的都知道，滚动条不好控制，因为大部分浏览器的滚动条都是不可控的，没有什么css属性让你来控制滚动条的行为。但是以webkit为内核的浏览器以及谷歌等部分浏览器还是“冒天下之大不韪”实现了一部分非标准的滚动条控制。为什么说是一部分？因为现在已经公布的能够控制滚动条的css属性并不能够做到对滚动条的完美控制。为什么说是非标准？因为现在已经公布的能够控制滚动条的css属性都有"-webkit-"前缀。

为了解决各个浏览器上的滚动条都能表现出一致的效果，也就是为了解决滚动条的兼容性，“jQuery custom content scroller”也就是mCustomScrollbar就出现了，先看下其效果：

左边的是使用插件mCustomScrollbar控制实现的滚动条，右边是使用-webkit-为前缀的css属性实现的滚动条，两者可以对比一下，整个代码：

html代码：

<html>
<head>
    <meta charset="utf-8" />
    <title>mCustomScrollbar滚动条</title>
    <link rel="stylesheet" href="jquery.mCustomScrollbar.css">
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="jquery.mCustomScrollbar.js"></script>
</head>
<body>
    <div>
<p>
11.伪元素选择器：为什么要有伪元素选择器？有时候要选择本身无法描述但是易于
识别的部位，比如段落首行或者鼠标滑过连接，因此才有了伪元素和伪类。
语法(一个冒号也兼容)：
选择器::before{}或者选择器::after{}或者选择器::firs-line或者::first-letter
例如，下面的方法常用于去除浮动：
.box1::after{
content:"";
height:0;
display:block;
visibility:hidden;
clear:both;
}
再例如，文字第一行颜色设置为红色：
   div::first-line{
   color:red;
   }
</p>   
    </div>
    <div>
        <p>
11.伪元素选择器：为什么要有伪元素选择器？有时候要选择本身无法描述但是易于
识别的部位，比如段落首行或者鼠标滑过连接，因此才有了伪元素和伪类。
语法(一个冒号也兼容)：
选择器::before{}或者选择器::after{}或者选择器::firs-line或者::first-letter
例如，下面的方法常用于去除浮动：
.box1::after{
content:"";
height:0;
display:block;
visibility:hidden;
clear:both;
}
再例如，文字第一行颜色设置为红色：
   div::first-line{
   color:red;
   }
</p>   
    </div>
</body>
</html>

css代码：

<style>
body{
font-size:14px;
}
div.cont1,div.cont2{
width: 150px;
            height: 250px;
            background: purple;
color: white;
display:inline-block;
}
        .cont1{
            overflow-y: hidden;/*这里要把overflow属性设置为hidden以去掉默认的滚动条*/
        }

        .cont2{
            overflow-y: scroll;
            margin-left: 200px;
        }
        /*-webkit-scrollbar只有谷歌浏览器支持伪元素定义滚动条的样式*/
        .cont2::-webkit-scrollbar {/*滚动条整体*/
            width:10px;
        }
        .cont2::-webkit-scrollbar-track {/*滚动轨道*/
            background-color:#ff0000;
        }
        .cont2::-webkit-scrollbar-thumb {  /*滚动块*/
            background-color:#000;
        }
    </style>

js代码：

<script>
    /**
     * 注意：调用之后内容超出时会自动出现
     * */
        $(window).on("load",function(){
            //默认效果
          //  $(".divc").mCustomScrollbar();
            $(".cont1").mCustomScrollbar({
               // axis:'xy', //设置x轴或y轴上面有滚动条
                theme:"dark", //另外有light等
                scrollbarPosition: "outside" //inside(默认) outside(在内容区外边)

            });
        });
</script>

有几个需要注意的地方：

1.需要被mCustomScrollbar滚动条插件控制的内容区域需要设置css属性“overflow: hidden”，才可以正确显示滚动条，因为overflow属性设置为hidden后才能去掉默认的滚动条，由插件控制的滚动条才能被正确展现。

2.由-webkit-scrollbar等这些css属性控制的滚动条我这里只是为了对比效果才使用，工作中很少使用这些属性，因为兼容性太差，是件出力不讨好的事情。 3.mCustomScrollbar滚动条插件有很多属性可以配置，我这里只写了两三个，写的多与少根据你的需要而定，我写这篇文章的作用呢，是只要让你知道了这个插件的存在，知道了使用的方法就够了，mCustomScrollbar滚动条插件更多的属性配置参考它的官网吧

乐之者java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mCustomScrollbar定制统一的滚动条

搞前端的都知道，滚动条不好控制，因为大部分浏览器的滚动条都是不可控的，没有什么css属性让你来控制滚动条的行为。但是以webkit为内核的浏览器以及谷歌等部分浏览器还是“冒天下之大不韪”实现了一部分非标准的滚动条控制。为什么说是一部分？因为现在已经公布的能够控制滚动条的css属性并不能够做到对滚动条的完美控制。为什么说是非标准？因为现在已经公布的能够控制滚动条的css属性都有"-we...
复制链接

扫一扫