您的位置首页百科问答

CSS怎么修改滚动条样式

CSS怎么修改滚动条样式

1.打开网页开发工具,新建一个HTML文件

2.添加填充内容让页面出现滚动条(这一步是为了方便给大家演示!)

3.编写滚动条样式:

body::-webkit-scrollbar{

width:10px;

}

body::-webkit-scrollbar-track{

background:#999;

border-raus:2px;

}

body::-webkit-scrollbar-thumb{

background:red;

border-radius:10px;

}

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

background:#333;

}

body::-webkit-scrollbar-corner{

background:#179a16;

}

4.打开浏览器预览效果:

5.滚动条参数说明:

::-webkit-scrollbar

::-webkit-scrollbar-thumb

::-webkit-scrollbar-track

::-webkit-scrollbar-button

::-webkit-scrollbar-track-piece

::-webkit-scrollbar-corner

::-webkit-resizer

方法