欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

自定义滚动条样式

程序员文章站 2022-07-10 16:29:40
...

/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/

*::-webkit-scrollbar {

width: 5px;

height: 5px;

background-color: #f2f2f2;

}

/*滚动条的轨道,内阴影及圆角*/

*::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

border-radius: 5px;

background-color: #f2f2f2;

}

/*滑块,内阴影及圆角*/

*::-webkit-scrollbar-thumb {

/*width: 10px;*/

height: 20px;

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

background-color: #c2c2c2;

}