本文將會告訴你如何用CSS修改/美化瀏覽器頁面上出現的滾動條。改變它們的顏色，調整它們的外形，適配你對頁面UI設計。我們首先將會看看谷歌(Webkit)瀏覽器提供了哪些CSS屬性，最后，還將介紹如何用jQuery支持其它類型的瀏覽器。
?
各種瀏覽器對CSS滾動條的支持情況
這 里說的Webkit瀏覽器包括谷歌瀏覽器，蘋果公司的Safari瀏覽器，以及最新的Opera瀏覽器。這些瀏覽器加起來占有超過半數的桌面瀏覽 器市場份額。對于移動端瀏覽器，基本上是谷歌瀏覽器和Safari瀏覽器的天下。唯一的遺憾是火狐瀏覽器，至今沒有對CSS滾動條屬性做任何的改進。至于 IE瀏覽器，我們期待吧。
鑒于目前瀏覽器市場的格局，我們很有信心相信CSS滾動條美化功能會有很好的很光明的前景。
?
滾動條會出現在哪些地方
在真正開始對CSS滾動條的講解之前，先讓我們做一個簡單的演示頁面；一個含有滾動條的頁面。滾動條通常會出現在這些地方：
- 瀏覽器邊框，當頁面內容超過瀏覽器視窗大小
-
textarea，內容過多時 -
iframe -
div或任何block元素，當它們的被設定成overflow屬性時。
對于我們的演示頁面，使用的HTML代碼是下面這些：
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
<p>Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.</p>
<p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p>
<p>Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.</p>
</div>
?
其實只有一個
div
元素，但因為有太多的內容而出現滾動條。我們給它最初的CSS樣式是固定高度和寬度，使它出現橫向和縱向滾動條，CSS代碼是這樣的：
.container {
width: 400px;
height: 300px;
background-color: #DCDCDC;
overflow: scroll; /* 讓它顯示滾動條 */
}
?
?
?
用CSS美化滾動條
很多年前谷歌瀏覽器就已經開始支持對滾動條的CSS美化。這些Webkit瀏覽器專屬的CSS屬性需要使用
-webkit-
瀏覽器引擎前綴
，我們在這里將只會使用一些基本的CSS滾動條屬性，在代碼里會增加一些必要的解釋說明。
::-webkit-scrollbar {
width: 15px;
} /* 這是針對缺省樣式 (必須的) */
?
?
當CSS中出現偽元素樣式時，Webkit引擎將會關閉它的缺省滾動條樣式輸出，只使用CSS里提供的樣式信息。 – Surfin’ Safari
這里是其它一些偽元素樣式：
::-webkit-scrollbar-track {
background-color: #b46868;
} /* 滾動條的滑軌背景顏色 */
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
} /* 滑塊顏色 */
::-webkit-scrollbar-button {
background-color: #7c2929;
} /* 滑軌兩頭的監聽按鈕顏色 */
::-webkit-scrollbar-corner {
background-color: black;
} /* 橫向滾動條和縱向滾動條相交處尖角的顏色 */
?
?
如果你對這里為什么會使用雙引號標注偽元素，請看《 理解:Before和:After偽元素 》里的講解。
加上了這些CSS屬性，你將會看到下面的效果(再次提醒：你需要使用Webkit瀏覽器，比如谷歌瀏覽器才能看到效果)。
?
IE瀏覽器有自己的滾動條CSS屬性！
你可能會感到意外，IE瀏覽器是最早的一個支持滾動條外觀CSS自定義的瀏覽器。早在IE5.5版時就支持，但僅支持顏色的改變。
這些屬性今天仍然是延用的；看看這IE9里的演示效果：
body {
scrollbar-face-color: #b46868;
}
?
?
將會是下面這個樣子：
?
兼容支持非Webkit瀏覽器
谷歌瀏覽器的用戶是最幸福的。但我們也不能放棄火狐瀏覽器和IE瀏覽器用戶。對于這些瀏覽器，有一個非常有效的補救方案，就是使用javascript插件。網上有不少人推薦一個由 Kelvin Luck 開發的一個jQuery插件： jScrollPane 。但也有人評論這個插件是“PITA”，我翻了一下字典，發現“PITA”中文意思是“讓人蛋疼”。經過試用，感到它的確是讓人蛋疼。不推薦使用它。我發現了另外一個插件 malihu-custom-scrollbar-plugin ，感覺相當不錯，它的用法是：
<link rel="stylesheet" href="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css">
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
if (!$.browser.webkit) {
$.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default
$.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default
$(".container").mCustomScrollbar({theme:"dark"});
}
</script>
?
?
?
總結
已經有很多網站都使用了這些滾動條的CSS美化技巧，特別是谷歌的一些應用和網站上，比如Gmail和Google+。相信很快火狐瀏覽器和IE瀏覽器也會提供自己的解決方案。如果你在使用滾動條的CSS美化上有非常漂亮的例子，請留在評論里供大家欣賞，謝謝。
?
原文： http://www.webhek.com/scrollbar
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
