CSS中關於滾動條樣式的設定

滾動條的設定

1. ::-webkit-scrollbar 滾動條整體部分，可以設定寬度等
2. ::-webkit-scrollbar-button 滾動條兩端的按鈕
3. ::-webkit-scrollbar-track 外層軌道
4. ::-webkit-scrollbar-track-piece 內層滾動槽
5. ::-webkit-scrollbar-thumb 滾動的滑塊
6. ::-webkit-scrollbar-corner 邊角
7. ::-webkit-resizer 定義右下角拖動塊的樣式

::-webkit-scrollbar-track-piece ：內層軌道，具體區別看下面gif圖，需要注意的就是它會覆蓋第三個屬性的樣式。

::-webkit-scrollbar-thumb ：滾動條裡面可以拖動的那部分

::-webkit-scrollbar-corner ：邊角，兩個滾動條交匯處

::-webkit-resizer ：兩個滾動條交匯處用於拖動調整元素大小的小控制項（基本用不上）

例子：

div ::-webkit-scrollbar

scrollbar-arrow-color: color; /*三角箭頭的顏色*/

scrollbar-face-color: color; /*立體滾動條的顏色（包括箭頭部分的背景色）*/
scrollbar-3dlight-color: color; /*立體滾動條亮邊的顏色*/
scrollbar-highlight-color: color; /*滾動條的高亮顏色（左陰影？）*/
scrollbar-shadow-color: color; /*立體滾動條陰影的顏色*/
scrollbar-darkshadow-color: color; /*立體滾動條**影的顏色*/
scrollbar-track-color: color; /*立體滾動條背景顏色*/
scrollbar-base-color:color; /*滾動條的基色*/

CSS 設定滾動條樣式

定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸 webkit scrollbar 定義滾動條軌道 內陰影 圓角 webkit scrollbar track 定義滑塊 內陰影 圓角 webkit scrollbar thumb 定義滾動條就是利用偽元素與偽類，那什麼是偽元素和偽類呢？偽類大家應該...

CSS 設定滾動條樣式

從dhtml出現以來，微軟對dhtml功能的加強就沒有停止過，在微軟最新的遊覽器internet explorer 5.5的的ie5.5增加了許多新的樣式表內容，對滾動條的樣式進行修改也是其中之一，下面我們簡單地介紹一下涉及瀏覽器滾動條的樣式表內容 1 overflow內容溢位時的設定 overfl...

CSS滾動條樣式設定

css滾動條樣式設定 webkit瀏覽器css設定滾動條 主要有下面7個屬性 webkit scrollbar 滾動條整體部分，可以設定寬度啥的 webkit scrollbar button 滾動條兩端的按鈕 webkit scrollbar track 外層軌道 webkit scrollbar...