CSS美化頁面滾動條

文章來自：http://www.webhek.com/scrollbar

本文將會告訴你如何用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美化上有很是漂亮的例子，請留在評論裏供你們欣賞，謝謝。