Webkit 可以利用CSS修改Scoll bar的外觀,有試過其他瀏覽器是不行的,而有時候在使用局部範圍的overflow: auto,會需要較為纖細的scroll bar,如果不在意webkit以外的瀏覽器,可以試試看這個方法。
來源:http://cssdeck.com/labs/css3-webkit-vertical-scrollbars
上面這是內建webkit的scroll bar,有些時候因為需要配合版面,這樣式並不合適,而Webkit的瀏覽器可以透過以下CSS來做調整。
&::-webkit-scrollbar
//"&"是必須與上一層同層級
//-webkit-scrollbar : 整體的scrollbar樣式
&::-webkit-scrollbar-thumb
//bar的樣式
&::-webkit-scrollbar-track
//軌道的樣式
::-webkit-scrollbar-thumb:window-inactive
//頁面是在被啟用的情況下(非必要)
scrollbar範例
注意本範例只有Webkit瀏覽器有效,Chrome or Safari
如果要跨瀏覽器的scrollbar,就建議使用javascript或是jquery了。