CSS修改瀏覽器預設滾動條

2021-10-23 22:57:34 字數 1058 閱讀 9898

css修改預設滾動條**

/*滾動條寬度*/

.box-wrap::-webkit-scrollbar

/*滾動條裡面小方塊*/

.box-wrap::-webkit-scrollbar-thumb

/*滾動條裡面軌道*/

.box-wrap::-webkit-scrollbar-track

完整示例**如下

lang

="en"

>

>

charset

="utf-8"

/>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

/>

>

documenttitle

>

>

.box-wrap

.box-inner

/*滾動條寬度*/

.box-wrap::-webkit-scrollbar

/*滾動條裡面小方塊*/

.box-wrap::-webkit-scrollbar-thumb

/*滾動條裡面軌道*/

.box-wrap::-webkit-scrollbar-track

style

>

head

>

>

class

="box-wrap"

>

class

="box-inner"

>

容器內容容器內容容器內容容器內容容器內容容器內容

div>

div>

body

>

html

>

修改後滾動條效果如下圖所示

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

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

修改瀏覽器滾動條樣式

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

瀏覽器滾動條

做 時發現登入成功後瀏覽器滾動條消失無法滾動頁面 通過觀察和除錯,發現是強制隱藏了bootstrap的模態框後,body的overflow變為了hidden,同時也多了乙個17px的右內邊距,無法呼叫出垂直滾動條,解決方案 隱藏模態框的同時設定body的overflow為scroll,同時取消右內邊...