搞前端的都知道，滾動條不好控制，因為大部分浏覽器的滾動條都是不可控的，沒有什麼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" target="_blank" rel="external nofollow" >
<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滾動條插件更多的屬性配置參考它的官網吧
![沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)