css控制預設滾動條樣式

針對webkit核心的瀏覽器，使用偽類來改變滾動條的預設樣式，詳情如下：

滾動條組成部分

1. ::-webkit-scrollbar                滾動條整體部分

2. ::-webkit-scrollbar-thumb          滾動條裡面的小方塊，能向上向下移動（或向左向右移動）
3. ::-webkit-scrollbar-track          滾動條的軌道（裡面裝有thumb）
4. ::-webkit-scrollbar-button         滾動條的軌道的兩端按鈕，由於通過點選微調小方塊的位置。
5. ::-webkit-scrollbar-track-piece    內層軌道，滾動條中間部分
6. ::-webkit-scrollbar-corner         邊角，即垂直滾動條和水平滾動條相交的地方
7. ::-webkit-resizer                  兩個滾動條的交匯處上用於拖動調整元素大小的小控制項

scrollbar-arrow-color: #f4ae21; /*

三角箭頭的顏色
*/scrollbar-face-color: #333; /*
立體滾動條的顏色
*/scrollbar-3dlight-color: #666; /*
立體滾動條亮邊的顏色
*/scrollbar-highlight-color: #666; /*
滾動條空白部分的顏色
*/scrollbar-shadow-color: #999; /*
立體滾動條陰影的顏色
*/scrollbar-darkshadow-color: #666; /*
立體滾動條強陰影的顏色
*/scrollbar-track-color: #666; /*
立體滾動條背景顏色
*/scrollbar-base-color:#f8f8f8; /*
滾動條的基本顏色
*/cursor:url(mouse.cur); 
/*自定義個性滑鼠

/*

定義滾動條軌道
*/#style-2::-webkit-scrollbar-track
/*定義滾動條高寬及背景
*/#style-2::-webkit-scrollbar
/*定義滾動條
*/#style-2::-webkit-scrollbar-thumb

1、div必須設定固定的高度，不能使用百分比或 auto 等彈性值。

2、其中的內容高度必須超過它本身的高度。

3、必須新增屬性 「overflow：auto」。

附：

::-webkit-scrollbar

::-webkit-scrollbar:hover
::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active
::-webkit-scrollbar-track
::-webkit-scrollbar-track:hover

css控制滾動條樣式

1 webkit scrollbar 滾動條整體部分，其中的屬性有width,height,background,border等。4 webkit scrollbar track piece 內層軌道，具體區別看下面gif圖，需要注意的就是它會覆蓋第三個屬性的樣式。5 webkit scrollba...

CSS改變滾動條的預設樣式

定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸 webkit scrollbar 定義滾動條軌道 內陰影 圓角 webkit scrollbar track 定義滑塊 內陰影 圓角 webkit scrollbar thumb 效果圖 滾動條的屬性 webkit scrollbar 滾動條整體部...

css滾動條樣式

滾動條樣式 webkit scrollbar 整個滾動條.webkit scrollbar button 滾動條上的按鈕 上下箭頭 webkit scrollbar thumb 滾動條上的滾動滑塊.webkit scrollbar track 滾動條軌道.webkit scrollbar track...