用CSS美化你的滾動條

用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美化上有非常漂亮的例子，請留在評論裏供大家欣賞，謝謝