滾動條樣式修改

1)谷歌瀏覽器
::-webkit-scrollbar :滾動條整體部分,其中的屬性有width,height,background,border等。
::-webkit-scrollbar-button :滾動條兩端的按鈕??梢杂胐isplay:none讓其不顯示,也可以添加背景圖片,顏色改變顯示效果。
::-webkit-scrollbar-track :外層軌道??梢杂胐isplay:none讓其不顯示,也可以添加背景圖片,顏色改變顯示效果。
::-webkit-scrollbar-track-piece :內(nèi)層軌道,具體區(qū)別看下面gif圖,需要注意的就是它會覆蓋第三個屬性的樣式。
::-webkit-scrollbar-thumb :滾動條里面可以拖動的那部分
::-webkit-scrollbar-corner :邊角,兩個滾動條交匯處
::-webkit-resizer :兩個滾動條交匯處用于拖動調(diào)整元素大小的小控件


image.png
以下注釋中的數(shù)字與下圖中數(shù)字相對應(yīng)
CSS
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }

2)IE瀏覽器


image.png

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容