修改瀏覽器的滾動條樣式
阿新 • • 發佈:2021-08-06
修改瀏覽器的滾動條樣式
在日常開發中,瀏覽器自帶的滾動條樣式比較醜,有時候也與系統整體的色調不搭配,因為需要修改滾動條樣式
滾動條從外觀來看是由兩部分組成:1,可以滑動的部分,我們叫它滑塊2,滾動條的軌道,即滑塊的軌道,一般來說滑塊的顏色比軌道的顏色深。
css樣式
div::-webkit-scrollbar{ width:12px; height:12px; } div::-webkit-scrollbar-track{ background: rgb(239, 239, 239); border-radius:2px; } div::-webkit-scrollbar-thumb{ background: #bfbfbf; border-radius:10px; } div::-webkit-scrollbar-thumb:hover{ background: #888; } div::-webkit-scrollbar-corner{ background: #179a16; }
引數說明
::-webkit-scrollbar 滾動條整體部分 ::-webkit-scrollbar-thumb 滾動條裡面的小方塊,能向上向下移動(或往左往右移動,取決於是垂直滾動條還是水平滾動條) ::-webkit-scrollbar-track 滾動條的軌道(裡面裝有Thumb) ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕,允許通過點選微調小方塊的位置。 ::-webkit-scrollbar-track-piece 內層軌道,滾動條中間部分(除去) ::-webkit-scrollbar-corner 邊角,即兩個滾動條的交匯處 ::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控制元件
https://www.cnblogs.com/luoxuemei/p/11818254.html