修改瀏覽器預設滾動條樣式 屬性自定義

2021-10-08 03:15:07 字數 834 閱讀 9324

滾動條各個屬性說明

::-webkit-scrollbar :滾動條整體部分,其中的屬性有width,height,background,border等。

::-webkit-scrollbar-thumb :滾動條裡面可以拖動的滑塊

::-webkit-scrollbar-track-piece :內層軌道,需要注意的就是它會覆蓋第三個屬性的樣式。

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

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

注意:一般使用前三個即可達到修改滾動條樣式,css如下, 各項均可修改:

/*定義滾動條寬高及背景,寬高分別對應橫豎滾動條的尺寸*/

::-webkit-scrollbar

/*定義滾動條的軌道顏色、內陰影及圓角*/

::-webkit-scrollbar-track

/*定義滑塊顏色、內陰影及圓角*/

::-webkit-scrollbar-thumb

/* 游標移到滾動滑塊上樣式顏色變深 */

::-webkit-scrollbar-thumb:hover

/*定義兩端按鈕的樣式*/

::-webkit-scrollbar-button

/*定義右下角匯合處的樣式*/

::-webkit-scrollbar-corner

修改後滾動條效果:

修改瀏覽器滾動條樣式

webkit scrollbar 定義滾動條軌道 內陰影 圓角 webkit scrollbar track 定義滑塊 內陰影 圓角 webkit scrollbar thumb ie 的寫法 scrollbar arrow color color 三角箭頭的顏色 scrollbar face co...

CSS修改瀏覽器預設滾動條

css修改預設滾動條 滾動條寬度 box wrap webkit scrollbar 滾動條裡面小方塊 box wrap webkit scrollbar thumb 滾動條裡面軌道 box wrap webkit scrollbar track 完整示例 如下 lang en charset ut...

css 改變瀏覽器預設滾動條樣式

這個網上很多的教程,我就不多嗶嗶了,直接貼 方便自己和大家使用。可以把下面的 放到乙個css中,然後全域性引入就可以了。整個滾動條 webkit scrollbar 滾動條有滑塊的軌道部分 webkit scrollbar track piece 滾動條滑塊 豎向 vertical 橫向 horiz...