搞前端的都知道,滚动条不好控制,因为大部分浏览器的滚动条都是不可控的,没有什么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滚动条插件更多的属性配置参考它的官网吧