小技巧：為滾動條添加樣式來匹配你的UI設計

Chinese (Traditional) (中文（繁體）) translation by Stypstive (you can also view the original English article)

這個小技巧將會引導你來提升滾動條的外觀以達到匹配你UI設計的目的。我們將來看看哪一些WebKit瀏覽器支持這個CSS，另外我們將使用jQuery的fallback來滿足其他瀏覽器的支持。

想要抄個捷徑？

如果正在尋求幫助來為你網站的特定組件添加樣式，那麼你可以從專家那裡找到更快速的解決辦法，Envato有眾多的專家們隨時準備幫助你重新為你添加樣式或者自定義所有種類的網頁組件。

關於瀏覽器的快速筆記

當我們涉及到以WebKit為基礎的瀏覽器的時候，我們本質上是在說Apple的Safari和Google Chrome。他們兩加起來大約佔據了超過40%的全部桌面瀏覽器市場。對於平板電腦來說，Apple的iPad總是會使用Webkit無論它使用的是任何公司的瀏覽器。 Google同時也添加了Chrome到它的安卓系統以及Chromebooks裡，當然了，這些都是基於Google Chrome的。

看到這些數據以後，我們應該不難想像在不久的將來，滾動條的樣式化一定是很有前景的。

步驟1：一個有滾動條的簡單頁面

在我們可以實際的使用CSS來創建樣式並開始這個教程之前，我們需要一個可以正常工作的樣例；一個擁有滾動條的頁面。通常來說，滾動條在滿足以下條件時可見：

文字內容比可見的窗口區域要大（一個滾動條將在右側顯示）。
一個包含了足夠文字的textarea，這樣滾動條也會出現。
一個iframe用來顯示一個不同的頁面。
一個div或者任何其他的區塊元素並且包含了overflow屬性集的。

為了實現這個樣例，我們將使用最後一個選項，這裡是我的最初的結構代碼：

<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，它會設置一些固定的尺寸和橫向及縱向滾動條的觸發器：

  .container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* showing scrollbars */
	}

你應該會看到一些結果看起來像下面這樣：

步驟2：開始針對Webkit內核瀏覽器的代碼

有一段時間以前（幾年前）CSS偽類元素被從Webkit內核瀏覽器開發出來針對滾動條，正是這樣才帶給了我們根據主題來改變滾動條樣式的可能性。

讓我們開始添加一些樣式，使用-webkit-前綴以及wenkit的自定義滾動條屬性。記得，我將只會演示最基本的CSS屬性來讓你明白原理，更多的解釋你可以看到我包含在了註釋裡。

1	::-webkit-scrollbar {
2	width: 15px;
3	} /* this targets the default scrollbar (compulsory) */

當這個偽類元素顯示時，WebKit會關閉瀏覽器自帶的滾動條渲染並僅僅使用CSS裡提供的樣式信息。 ——Surfin' Safari

那麼現在我們需要添加一些其他的偽類元素：

	::-webkit-scrollbar-track {
		  background-color: #b46868;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
	} /* this will style the thumb, ignoring the track */

	::-webkit-scrollbar-button {
		  background-color: #7c2929;
	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

	::-webkit-scrollbar-corner {
		  background-color: black;
	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

在添加了這些CSS之後你，你應該可以看到下面的效果（再一次強調，只是在Webkit內核的瀏覽器）。

你猜怎麼樣？ IE瀏覽器有它自己的滾動條樣式！

是的——事實上，IE是第一個支持用CSS來為滾動條添加樣式的瀏覽器，這個可以追溯到IE5.5的版本，但是只有顏色可以改變。

這個內容可以被用在今天；看看下面這個單個的IE9屬性，僅供展示。

1	body {
2	scrollbar-face-color: #b46868;
3	}

我們來看看最終結果：

步驟3：非Webkit瀏覽器的Fallback功能

完成了Webkit的部分，Firefox、IE和Opera也可以來分享這一部分的快樂，對於他們，我們有一個非常漂亮的fallback來實現這個功能，我們需要用到jScrollPane，這個jQuery插件是由Kelvin Luck開發的，而且它會是我們今天的救星。

Kelvin的網站上有很多很好的樣例，但是對於基本的使用來說，我們需要的就是下載jQuery以及這個jScrollPane的文件並將它們導入到頁面中，你可以使用以下方式：

	<!-- this cssfile can be found in the jScrollPane package -->
	<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

	<!-- latest jQuery direct from google's CDN -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<!-- the jScrollPane script -->
	<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

	<!--instantiate after some browser sniffing to rule out webkit browsers-->
	<script type="text/javascript">
	
	  $(document).ready(function () {
	      if (!$.browser.webkit) {
	          $('.container').jScrollPane();
	      }
	  });
	
	</script>
				
</body>

為了做到匹配我們的主題，讓我們打開jquery.jscrollpane.css然後編輯以下幾行，來改變顏色的值（為了增強性能，你可能希望將所有的樣式都放到你自己的文件裡）：

	.jspTrack
	{
		background: #b46868; /* changed from #dde */
		position: relative;
	}

	.jspDrag
	{
		background: rgba(0,0,0,0.2); /* changed from #bbd */
		position: relative;
		top: 0;
		left: 0;
		cursor: pointer;
	}