原文鏈接：https://blog.csdn.net/qq_29132907/article/details/78426163
CSS3自定義滾動條樣式 -webkit-scrollbar
有時(shí)候覺得瀏覽器自帶的原始滾動條不是很美觀，那webkit瀏覽器是如何自定義滾動條的呢？
Webkit支持擁有overflow屬性的區(qū)域救鲤，列表框，下拉菜單尉尾，textarea的滾動條自定義樣式。當(dāng)然燥透，兼容所有瀏覽器的滾動條樣式目前是不存在的沙咏。
滾動條的組成：
::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-thumb 滾動條里面的小方塊，能上下左右移動（取決于是垂直滾動條還是水平滾動條）
::-webkit-scrollbar-track 滾動條的軌道（里面裝有thumb）
::-webkit-scrollbar-button 滾動條軌道兩端的按鈕班套，允許通過點(diǎn)擊微調(diào)小方塊的位置
::-webkit-scrollbar-track-piece 內(nèi)層軌道肢藐，滾動條中間部分（除去）
::-webkit-scrollbar-corner 邊角，及兩個(gè)滾動條的交匯處
::-webkit-resizer 兩個(gè)滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件
自定義滾動條簡單版：
/*定義滾動條寬高及背景吱韭，寬高分別對應(yīng)橫豎滾動條的尺寸*/
.scrollbar::-webkit-scrollbar{
width: 16px;
height: 16px;
background-color: #f5f5f5;
}
/*定義滾動條的軌道吆豹，內(nèi)陰影及圓角*/
.scrollbar::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
border-radius: 10px;
background-color: #f5f5f5;
}
/*定義滑塊，內(nèi)陰影及圓角*/
.scrollbar::-webkit-scrollbar-thumb{
/*width: 10px;*/
height: 20px;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
前段時(shí)間，到網(wǎng)上找素材時(shí)痘煤，看到了一個(gè)很個(gè)性的滾動條式凑阶，打開Chrome的調(diào)試工具看了一下，發(fā)現(xiàn)不是用JavaScript來模擬實(shí)現(xiàn)的衷快，覺得有必要折騰一下宙橱。于是在各大瀏覽器中對比了一下，發(fā)現(xiàn)只用Chrome適用蘸拔，也就是說這個(gè)用的是Chrome的私有CSS屬性师郑。便百之谷之后，發(fā)現(xiàn)原來不僅僅只用Chrome调窍，其它的瀏覽器在不同程度上支持自定義滾動條樣式的宝冕。下面是我不斷測試的結(jié)果，若有錯誤或不全陨晶，請?jiān)谠u論里面給出猬仁，我會立馬更正帝璧；若有更好的方案先誉，你可以留言，讓大家都開開眼界的烁。褐耳。。渴庆。铃芦。。
自定義IE瀏覽器滾動條樣式
追溯瀏覽器對滾動條的自定義襟雷，恐怕最早的就是IE瀏覽器了（好像最開始支持的版本是IE5.5）刃滓。下面列出了多個(gè)版本的支持性況：
滾動條樣式 支持情況 支持瀏覽器版本 可否繼承 描述
scrollbar-3dlight-color IE特有屬性 IE5.5+ y 設(shè)置滾動框的和滾動條箭頭左上邊緣的顏色
scrollbar-highlight-color IE特有屬性 IE5.5+ y 設(shè)置滾動框的和滾動條箭頭左上邊緣的顏色
scrollbar-face-color IE特有屬性 IE5.5+ y 設(shè)置滾動框和滾動條箭頭的顏色
scrollbar-arrow-color IE特有屬性 IE5.5+ y 設(shè)置滾動條箭頭的顏色
scrollbar-shadow-color IE特有屬性 IE5.5+ y 設(shè)置滾動框的和滾動條箭頭右下邊緣的顏色
scrollbar-dark-shadow-color IE特有屬性 IE5.5+ y 設(shè)置滾動條槽的顏色
scrollbar-base-color IE特有屬性 IE5.5+ y 設(shè)置滾動條主要構(gòu)成部分的顏色
scrollbar-track-color IE特有屬性 IE5.5+ y 設(shè)置滾動條軌跡組成部分的顏色
為了有助于理解IE中滾動條樣式的控制，你可以查看如下的圖片：
經(jīng)過不斷的測試發(fā)現(xiàn)耸弄，在Win8 下面咧虎，有一部分樣式都起著相同的作用。估計(jì)是因?yàn)樵赪in8中扁平化的界面設(shè)計(jì)而重新定議了系統(tǒng)中滾動條计呈！以下是Win 8下面的滾動條樣式砰诵，并寫出了和CSS支持的情況：
1.以上所寫的幾個(gè)四個(gè)CSS屬性，足以控制Win 8系統(tǒng)下捌显，IE瀏覽器的滾動條樣式了茁彭。但經(jīng)過測試，發(fā)現(xiàn)扶歪，其它的四個(gè)屬性仍然支持（主要是在以上幾個(gè)屬性空缺時(shí)理肺，就會體現(xiàn)其作用）。具體如下：
2.關(guān)于scrollbar-track-color，scrollbar-face-color與scrollbar-base-color妹萨。直接看英語單詞贪薪，你就也許能明白scroll-base-color是一個(gè)備用顏色，只要前兩者未設(shè)置時(shí)眠副，它就開始起作用了画切。但是你得注意，當(dāng)scrollbar-base-color用來作scrollbar-track-color功能來用時(shí)囱怕，你會發(fā)現(xiàn)霍弹，實(shí)際顏色與設(shè)定的顏色要淡一點(diǎn)。不信你可以這樣試試：只設(shè)置一下scrollbar-base-color看看滾動條的效果娃弓。
關(guān)于scrollbar-dark-shadow-color屬性典格，通過測試發(fā)現(xiàn)Win 8下IE10，IE11滾動條并沒有改變台丛∷＝桑可能是win 8的滾動條重新定義了，導(dǎo)致沒有了隱影了吧Ｍ烀埂（僅個(gè)人猜想）
3.通過觀察我們發(fā)現(xiàn)防嗡，Win 8下的滾動條中，上箭頭和下箭頭后面的背景顏色都已經(jīng)從scroll-face-color中脫離出來了侠坎，從屬于scroll-track-color屬性控制蚁趁。
感覺IE瀏覽器滾動條自定制功能并不是很強(qiáng)，只能控制一樣顯示各個(gè)部分的顏色而已实胸，像寬度他嫡，結(jié)構(gòu)等都無法控制，要靠出個(gè)性點(diǎn)的滾動條庐完，很難钢属！很難！Ｃ徘淆党！
自定義FireFox瀏覽器滾動條
在網(wǎng)上找了很多關(guān)于Firfox自定義瀏覽器滾動條的方法，發(fā)現(xiàn)firefox中卻實(shí)是不支持的生音。發(fā)現(xiàn)了幾篇說可以更改宁否，自已也跟著代碼寫了幾次（不知是我錯了還是。缀遍。慕匠。），發(fā)現(xiàn)卻是不起作用域醇。以下是一點(diǎn)小的收獲：
@-moz-document url-prefix(http://),url-prefix(https://) {
/* 滾動條顏色 */
scrollbar {
-moz-appearance: none !important;
background: rgb(0,255,0) !important;
}
/* 滾動條按鈕顏色 */
thumb,scrollbarbutton {
-moz-appearance: none !important;
background-color: rgb(0,0,255) !important;
}
/* 鼠標(biāo)懸停時(shí)按鈕顏色 */
thumb:hover,scrollbarbutton:hover {
-moz-appearance: none !important;
background-color: rgb(255,0,0) !important;
}
/* 隱藏上下箭頭 */
scrollbarbutton {
display: none !important;
}
/* 縱向滾動條寬度 */
scrollbar[orient="vertical"] {
min-width: 15px !important;
}
}
實(shí)測以上代碼并不起作用台谊。但也可能是我的瀏覽器的版本不對吧蓉媳！你可以試試，要是有效的話锅铅，你可以把你的FF版本發(fā)表在文章評論里面酪呻。
webkit內(nèi)核的瀏覽器滾動條定制
在所有瀏覽器，滾動條可定制性最強(qiáng)的當(dāng)屬webkit內(nèi)核的瀏覽器了盐须。因?yàn)樵创a開放的原因玩荠，市面上基于webkit內(nèi)核的瀏覽器也是很難窮舉完。例如有：Google Chrome贼邓、Opera（opera最近宣布使用webkit內(nèi)核了）阶冈、360極速瀏覽器，獵豹瀏覽器等塑径，搜狗瀏覽器······
下面我們來看一下webkit瀏覽器是如何強(qiáng)大的吧女坑！
CSS
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
以上CSS代碼所管轄的區(qū)域?qū)完P(guān)系：以上注釋中的數(shù)字與下圖中數(shù)字相對應(yīng)。
上圖正如如下所言：
::-webkit-scrollbar 滾動條整體部分统舀，其中的屬性有width,height,background,border（就和一個(gè)塊級元素一樣）等匆骗。
::-webkit-scrollbar-button 滾動條兩端的按鈕∮颍可以用display:none讓其不顯示碉就，也可以添加背景圖片，顏色改變顯示效果描融。
::-webkit-scrollbar-track 外層軌道铝噩『饴欤可以用display:none讓其不顯示窿克，也可以添加背景圖片，顏色改變顯示效果毛甲。
::-webkit-scrollbar-track-piece 內(nèi)層軌道年叮，滾動條中間部分（除去）。
::-webkit-scrollbar-thumb 滾動條里面可以拖動的那部分
::-webkit-scrollbar-corner 邊角
::-webkit-resizer 定義右下角拖動塊的樣式
注意：對以上各個(gè)部分定義width,height時(shí)玻募。有如下功能：若是水平滾動條只损，則width屬性不起作用，height屬性用來控制滾動條相應(yīng)部分豎直方向高度七咧；若是豎直滾動條跃惫，則height屬性不起作用，width屬性用來控制相應(yīng)部分的寬度艾栋。
能過上面的不斷的測試爆存。在Chrome中，滾動條中的各個(gè)部分和DOM中塊級元素是一樣的蝗砾。通過::-webkit-scrollbar等就類似于原來所說的CSS中的選擇器先较。而{}中的屬性携冤，你就像控制一般塊級元素一樣簡單（強(qiáng)大啊）闲勺。
對應(yīng)的源代碼如下：
CSS部分代碼：
#scroll-1 {
width:200px;
height:200px;
overflow:auto;
}
#scroll-1 div {
width:400px;
height:400px;
} #scroll-1::-webkit-scrollbar {
width:10px;
height:10px;
}
#scroll-1::-webkit-scrollbar-button {
background-color:#FF7677;
}
#scroll-1::-webkit-scrollbar-track {
background:#FF66D5;
}
#scroll-1::-webkit-scrollbar-track-piece {
background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);
}
#scroll-1::-webkit-scrollbar-thumb{
background:#FFA711;
border-radius:4px;
}
#scroll-1::-webkit-scrollbar-corner {
background:#82AFFF;
}
#scroll-1::-webkit-scrollbar-resizer {
background:#FF0BEE;
}
HTML結(jié)構(gòu)：
<div id='scroll-1'>
<div >
<p>請選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動條的變化曾棕。
小天地，大世界是一個(gè)Web前端的技術(shù)博客菜循。 主要是關(guān)于
HTML 5,CSS 3,JavaScript,JQuery等翘地。除此之外，還
包含一些PHP語言等的實(shí)用例子癌幕。</p>
<p>請選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動條的變化子眶。
小天地，大世界是一個(gè)Web前端的技術(shù)博客序芦。 主要是關(guān)于
HTML 5,CSS 3,JavaScript,JQuery等臭杰。除此之外，還
包含一些PHP語言等的實(shí)用例子谚中。</p>
<p>請選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動條的變化型凳。
小天地，大世界是一個(gè)Web前端的技術(shù)博客恶守。 主要是關(guān)于
HTML 5,CSS 3,JavaScript,JQuery等狐援。除此之外，還
包含一些PHP語言等的實(shí)用例子某筐。</p>
<p>請選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動條的變化比搭。
小天地，大世界是一個(gè)Web前端的技術(shù)博客南誊。 主要是關(guān)于
HTML 5,CSS 3,JavaScript,JQuery等身诺。除此之外，還
包含一些PHP語言等的實(shí)用例子抄囚。</p>
<p>請選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動條的變化霉赡。
小天地，大世界是一個(gè)Web前端的技術(shù)博客幔托。 主要是關(guān)于
HTML 5,CSS 3,JavaScript,JQuery等穴亏。除此之外，還
包含一些PHP語言等的實(shí)用例子重挑。</p>
</div>
</div>
通過以上嗓化，我們幾乎就可以來重寫網(wǎng)站的滾動條了，但是webkit提供的還有更多的偽類谬哀，可以定制更豐富滾動條樣式刺覆。本文以下內(nèi)容參考：https://www.webkit.org/blog/363/styling-scrollbars/
:horizontal horizontal 偽類，主要應(yīng)用于選擇水平方向滾動條玻粪。
:vertical vertical偽類主要是應(yīng)用于選擇豎直方向滾動條
:decrement decrement偽類應(yīng)用于按鈕和內(nèi)層軌道(track piece)隅津。它用來指示按鈕或者內(nèi)層軌道是否會減小視窗的位置(比如诬垂，垂直滾動條的上面，水平滾動條的左邊伦仍。)
:increment increment偽類與和decrement類似结窘，用來指示按鈕或內(nèi)層軌道是否會增大視窗的位置(比如，垂直滾動條的下面和水平滾動條的右邊充蓝。)
:start start偽類也應(yīng)用于按鈕和滑塊隧枫。它用來定義對象是否放到滑塊的前面。
:end 類似于start偽類谓苟，標(biāo)識對象是否放到滑塊的后面官脓。
:double-button 該偽類可以用于按鈕和內(nèi)層軌道。用于判斷一個(gè)按鈕是不是放在滾動條同一端的一對按鈕中的一個(gè)涝焙。對于內(nèi)層軌道來說卑笨，它表示內(nèi)層軌道是否緊靠一對按鈕。
:single-button 類似于double-button偽類仑撞。對按鈕來說赤兴，它用于判斷一個(gè)按鈕是否自己獨(dú)立的在滾動條的一段。對內(nèi)層軌道來說隧哮，它表示內(nèi)層軌道是否緊靠一個(gè)single-button桶良。
:no-button 用于內(nèi)層軌道，表示內(nèi)層軌道是否要滾動到滾動條的終端沮翔，比如陨帆，滾動條兩端沒有按鈕的時(shí)候。
:corner-present 用于所有滾動條軌道采蚀，指示滾動條圓角是否顯示疲牵。
:window-inactive 用于所有的滾動條軌道，指示應(yīng)用滾動條的某個(gè)頁面容器(元素)是否當(dāng)前被激活搏存。(在webkit最近的版本中瑰步，該偽類也可以用于::selection偽元素。webkit團(tuán)隊(duì)有計(jì)劃擴(kuò)展它并推動成為一個(gè)標(biāo)準(zhǔn)的偽類)
另外璧眠，:enabled、:disabled读虏、:hover责静、和:active等偽類同樣在滾動條中適用。
看了這些偽類盖桥，怎么也沒有明白是什么意思灾螃，還是自已得寫的試試。實(shí)踐出真知嘛揩徊！你可以擊接以下鏈接到官方演示DEMO（感覺可以學(xué)到很多東西的）：http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html
下面我自已嘗試著去寫的DEMO腰鬼，不要嫌它太丑就好嵌赠。
三國平分，終歸一統(tǒng)
為了一致的用戶體驗(yàn)熄赡，有時(shí)我們就不得不放棄使用部分瀏覽器提供的CSS接口來定制滾動條姜挺，轉(zhuǎn)而尋求更佳的代替方案。
其中的一中方案是使用jQuery插件彼硫，jquery-custom-content-scroller炊豪。使用插件的好處是顯而易見的，但是壞處也多得去了拧篮。要是您想了解jQuery-custom-content-scroller的具體使用方法词渤，請移步到：http://manos.malihu.gr/jquery-custom-content-scroller/
下面我就jQuery滾動條插件的使用作一下簡單介紹：
第一步：在內(nèi)容的頂部引入滾動條相應(yīng)的樣式表文件和jquery的庫文件，jquery插件jquery.mcustomscrollbar文件串绩。代碼如下：
<link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.css" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
第二步：在要顯示滾動條的元素（元素內(nèi)容中必須要有溢出的塊缺虐，否則就不會出現(xiàn)滾動條）上面，加入class=”content”礁凡，然后再加入以下代碼：
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>
關(guān)于此插件的詳細(xì)介紹志笼，你可以訪問官網(wǎng)，里面講的相當(dāng)詳細(xì)把篓，我就不再此多贅述纫溃。
