jQuery自定捲軸樣式-Tiny Scrollbar

大家應該會覺得在平版電腦或手機捲動網頁會比較漂亮，那是因為在一般的電腦上，如果你的網頁寬度或高度大於一個螢幕，預設會幫你加上scrollbar，而這個scrollbar為了大家使用方便，會有一定的寬度，所以當出現scrollbar之後，畫面上就會有一塊被scrollbar佔走了，所以如果你的網頁裡有很多個scrollbar，這樣看起來就會很醜，這也是網頁設計者在製作時會盡量避開的設計。

不過在智慧型手機跟平版電腦普遍後，加上大家可以去拖曳螢幕捲動畫面，所以在這兩者上的UI就開始出現變化，也就是scrollbar不需要常態存在，只需在捲動的時候可以提醒使用者知道網頁的高度就可以了。


於是乎也開始有人會在一般的網頁使用這樣的UI，這次剛好FB相片瀏覽的改版就用到這種UI，不過因為不是瀏覽器預設的樣式，所以必須要做一些工。

還好網路上有一些不錯的jQuery外掛可以使用，這次我使用的是Tiny Scrollbar這個外掛，先到那邊去下載一下外掛。

因為這個外掛沒有自己生成UI，所以要準備類似下面的html結構
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
</div>
</div>
</div>

之後就是把內容塞到overview內，而scrollbar再使用外掛後就可以樣式化了。

view plaincopy to clipboardprint?

1. $('#scrollbar1').tinyscrollbar();  

之後對卷軸作樣式化，懂css的就可以自己調整了。

view plaincopy to clipboardprint?

1. //要套用的區塊大小 留一些空間給scrollbar   
2. #scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }   
3. //捲動內區域的大小    
4. #scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }   
5. #scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }   
6. #scrollbar1 .thumb .end,   
7. #scrollbar1 .thumb { background-color: #003D5D; }   
8. //scrollbar整體樣式   
9. #scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }   
10. //scrollbar卷軸背景樣式   
11. #scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }   
12. //scrollbar卷軸可見範圍樣式   
13. #scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }   
14. #scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }   
15. #scrollbar1 .disable{ display: none; }  

這樣就可以自訂你要的捲軸樣式，最後只要再加一個滑鼠移入讓捲軸顯現，移出讓捲軸消失，就大功告成了。

view plaincopy to clipboardprint?

1. $('#scrollbar1').hover(function(){   
2.     $(this).find(".scrollbar").fadeIn();   
3. }, function(){   
4.     $(this).find(".scrollbar").fadeOut();   
5. });  

如果要動態更新內容，要使用tinyscrollbar_update()這樣才會正常。

Demo