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
方法