CSS怎么修改滚动条样式

CSS怎么修改滚动条样式

很多做网站开发的小伙伴，为了体现网页的个性化美观，想自定义修改滚动条的样式。但是不知道怎么操作，下面小编就给你安排！

打开网页开发工具，新建一个HTML文件

添加填充内容让页面出现滚动条（这一步是为了方便给大家演示！）

编写滚动条样式：

body::-webkit-scrollbar{

width:10px;

}

body::-webkit-scrollbar-track{

background: #999;

border-radius:2px;

}

body::-webkit-scrollbar-thumb{

background: red;

border-radius:10px;

}

body::-webkit-scrollbar-thumb:hover{

background: #333;

}

body::-webkit-scrollbar-corner{

background: #179a16;

}

打开浏览器预览效果：

滚动条参数说明：

::-webkit-scrollbar

::-webkit-scrollbar-thumb

::-webkit-scrollbar-track

::-webkit-scrollbar-button

::-webkit-scrollbar-track-piece

::-webkit-scrollbar-corner

::-webkit-resizer

1、新建一个HTML文件

2、添加填充内容，让页面出现滚动条

3、添加滚动条样式

4、预览效果

5、查看参数说明