不但修改滾動條樣式,還能修復滾動條閃一下後不顯示問題
css1
::-webkit-scrollbar { width: 15px; height: 15px } ::-webkit-scrollbar-track { background-color: #f5f5f5;/*transparent*/ -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb { background-color: #9c9da0; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em }
css2
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-button, ::-webkit-scrollbar-button:vertical { display: none; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-track:vertical { background-color: black; } ::-webkit-scrollbar-track-piece { background-color: #f5f5f5; } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:vertical { margin-right: 10px; background-color: #a6a6a6; } ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:vertical:hover { background-color: #aaa; } ::-webkit-scrollbar-corner, ::-webkit-scrollbar-corner:vertical { background-color: #535353; } ::-webkit-scrollbar-resizer, ::-webkit-scrollbar-resizer:vertical { background-color: #ff6e00; }
說明
- ::-webkit-scrollbar 滾動條整體部分,其中的屬性有width,height,background,border(就和一個塊級元素一樣)等。
- ::-webkit-scrollbar-button 滾動條兩端的按鈕。可以用display:none讓其不顯示,也可以添加背景圖片,顏色改變顯示效果。
- ::-webkit-scrollbar-track 外層軌道。可以用display:none讓其不顯示,也可以添加背景圖片,顏色改變顯示效果。
- ::-webkit-scrollbar-track-piece 內層軌道,滾動條中間部分(除去)。
- ::-webkit-scrollbar-thumb 滾動條裏面可以拖動的那部分
- ::-webkit-scrollbar-corner 邊角
- ::-webkit-resizer 定義右下角拖動塊的樣式