jQuery自定捲軸樣式-Tiny Scrollbar

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

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

430268_3158042159776_1878445505_n
於是乎也開始有人會在一般的網頁使用這樣的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再使用外掛後就可以樣式化了。
  1. $('#scrollbar1').tinyscrollbar();  

之後對卷軸作樣式化,懂css的就可以自己調整了。
  1. //要套用的區塊大小 留一些空間給scrollbar   
  2. #scrollbar1 { width520pxclearbothmargin20px 0 10px; }   
  3. //捲動內區域的大小    
  4. #scrollbar1 .viewport { width500pxheight200pxoverflowhiddenpositionrelative; }   
  5. #scrollbar1 .overview { list-stylenonepositionabsolute; left: 0; top: 0; }   
  6. #scrollbar1 .thumb .end,   
  7. #scrollbar1 .thumb { background-color#003D5D; }   
  8. //scrollbar整體樣式   
  9. #scrollbar1 .scrollbar { positionrelativefloatrightwidth15px; }   
  10. //scrollbar卷軸背景樣式   
  11. #scrollbar1 .track { background-color#D8EEFDheight100%width:13pxpositionrelativepadding0 1px; }   
  12. //scrollbar卷軸可見範圍樣式   
  13. #scrollbar1 .thumb { height20pxwidth13pxcursorpointeroverflowhiddenpositionabsolute; top: 0; }   
  14. #scrollbar1 .thumb .end { overflowhiddenheight5pxwidth13px; }   
  15. #scrollbar1 .disable{ displaynone; }  

這樣就可以自訂你要的捲軸樣式,最後只要再加一個滑鼠移入讓捲軸顯現,移出讓捲軸消失,就大功告成了。
  1. $('#scrollbar1').hover(function(){   
  2.     $(this).find(".scrollbar").fadeIn();   
  3. }, function(){   
  4.     $(this).find(".scrollbar").fadeOut();   
  5. });  

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

Demo

留言