css改变浏览器默认滚动条样式
程序员文章站
2022-07-03 19:55:16
...
::-webkit-scrollbar {
/* 竖滚动条尺寸 */
width: 12px;
/* 横滚动条尺寸 */
height: 12px;
/* 滚动末端轨道背景颜色 */
background-color: #f5f5f5;
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
/* 内阴影 */
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
/* 圆角 */
border-radius: 10px;
/* 背景颜色 */
background-color: #f5f5f5;
}
/*定义滑块*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #bdbdbd;
}
/*鼠标悬停 滑块效果*/
::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.4);
}