一般設定(only IE)
html{
scrollbar-arrow-color: color; /* 三角箭頭的顏色 */
scrollbar-face-color: color; /* scrollbar的顏色(包括箭頭部分的背景色) */
scrollbar-3dlight-color: color; /* scrollbar亮邊的顏色 */
scrollbar-highlight-color: color; /* scrollbar的高亮顏色 */
scrollbar-shadow-color: color; /* scrollbar陰影的顏色 */
scrollbar-darkshadow-color: color; /* scrollbar外陰影的顏色 */
scrollbar-track-color: color; /* scrollbar背景色 */
scrollbar-base-color:color; /* scrollbar的基色 */
}
FLASH線上可視化工具
http://www.dengjie.com/temp/scroller.swf
-------------------------------------------------------------------------------------------------------------------
以webkit為基礎的瀏覽習(Chrome, safari)
/*scrollbar整體部分*/
::-webkit-scrollbar
/*scrollbar兩端的按鈕*/
::-webkit-scrollbar-button
/*外層軌道*/
::-webkit-scrollbar-track
/*內層軌道，scrollbar中間的部份*/
::-webkit-scrollbar-track-piece
/*scrollbar*/
::-webkit-scrollbar-thumb
/*scrollbar中間移動的那塊*/
::-webkit-scrollbar-corner
/*右下角拖動塊的樣式*/
::-webkit-scrollbar-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 用於所有的滾動條軌道，指示應用滾動條的某個頁面容器(元素)是否當前被激活。
參考資料：
設定scroll bar的CSS樣式
Creating custom scrollbars with CSS; How CSS isn’t great for every task
CSS自定義滾動條樣式 (Chrome, webkit)
文章標籤
全站熱搜