設定scroll bar的CSS樣式

張貼者： 日期：
我記得我剛學css的時候，最有印象的就是改變瀏覽器scrollbar的樣式，退伍後比較扎實的研究後，卻發現很少有文章提到scrollbar樣式，後來才知道原來是只有ie支援，現在用的人也是很少，有興趣還是可以看一下。

view plaincopy to clipboardprint?
  1. html{      
  2.         scrollbar-arrow-color: color; /* 三角箭頭的顏色  */  
  3.         scrollbar-face-color: color; /* scrollbar的顏色(包括箭頭部分的背景色) */    
  4.         scrollbar-3dlight-color: color; /* scrollbar亮邊的顏色 */  
  5.         scrollbar-highlight-color: color; /* scrollbar的高亮顏色 */  
  6.         scrollbar-shadow-color: color; /* scrollbar陰影的顏色 */  
  7.         scrollbar-darkshadow-color: color; /* scrollbar外陰影的顏色 */  
  8.         scrollbar-track-color: color; /* scrollbar背景色 */  
  9.         scrollbar-base-color:color; /* scrollbar的基色 */  
  10. }  

不過這邊只有改變顏色，但在以webkit為基礎的瀏覽器(chrome, safari)上可以做更多的設定。
::-webkit-scrollbar scrollbar整體部分
::-webkit-scrollbar-buttonscrollbar兩端的按鈕
::-webkit-scrollbar-track外層軌道
::-webkit-scrollbar-track-piece 內層軌道，scrollbar中間部分
::-webkit-scrollbar-thumb scrollbae可以拖動的那個，腫麼翻譯好呢？）
::-webkit-scrollbar-corner 邊角
::-webkit-resizer 定義右下角拖動塊的樣式

另外還有一些偽類可以使用
:horizontal: 水平方向的scrollbar
:vertical: 垂直方向的scrollbar
:decrement: 應用於按鈕和內層軌道(track piece)。它用來指示按鈕或者內層軌道是否會減小視窗的位置(比如，垂直滾動條的上面，水平滾動條的左邊。)
:increment: increment偽類和decrement類似，用來指示按鈕或內層軌道是否會增大視窗的位置(比如，垂直滾動條的下面和水平滾動條的右邊。)
:start: 應用於按鈕和滑塊。用來定義對象是否放到滑塊的前面。
:end: 類似於start偽類，標識對象是否放到滑塊的後面。
:double-button: 該偽類以用於按鈕和內層軌道。用於判斷一個按鈕是不是放在滾動條同一端的一對按鈕中的一個。對於內層軌道來說，它表示內層軌道是否緊靠一對按鈕。
:single-button: 類似於double-button偽類。對按鈕來說，它用於判斷一個按鈕是否自己獨立的在滾動條的一段。對內層軌道來說，它表示內層軌道是否緊靠一個single-button。
:no-button: 用於內層軌道，表示內層軌道是否要滾動到滾動條的終端，比如，滾動條兩端沒有按鈕的時候。
:corner-present: 用於所有滾動條軌道，指示滾動條圓角是否顯示。
:window-inactive: 用於所有的滾動條軌道，指示應用滾動條的某個頁面容器(元素)是否當前被激活。(在webkit最近的版本中，該偽類也可以用於::selection偽元素。webkit團隊有計劃擴展它並推動成為一個標準的偽類)

參考資料:
Styling Scrollbars
Creating custom scrollbars with CSS; How CSS isn’t great for every task
CSS自定義滾動條樣式 (Chrome, webkit)

有些我也不是很了解，我想可以直接對scrollbar的區塊作設定，會設定圓角、寬度跟背景圖，就可以做出很漂亮的scrollbar了。

留言

張貼留言