2012年1月20日 星期五

設定scroll bar的CSS樣式

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

  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了。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...