这篇博客详细介绍了如何使用CSS来定制网页中的滚动条样式，包括设置滚动条的整体外观、滚动区域轨道以及拖动滑块的样式。通过`::-webkit-scrollbar`、`::-webkit-scrollbar-track`和`::-webkit-scrollbar-thumb`等选择器，可以实现滚动条的颜色、尺寸、内阴影和圆角等视觉效果的调整，从而提升网页界面的美观度和用户体验。
&::-webkit-scrollbar {
width: 5px;
/*对垂直流动条有效*/
height: 5px;
/*对水平流动条有效*/
cursor: pointer;
}
/*定义滑块颜色、内阴影及圆角*/
&::-webkit-scrollbar-thumb {
border-radius: 7px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #bebebe;
}
说明
::-webkit-scrollbar
此属性是设置整个滚动条的样式
::-webkit-scrollbar-track
此属性是设置滚动条的滚动区域的样式即滚动条的轨道
::-webkit-scrollbar-thumb
次属性是设置滚动条可拖拽部分的样式即滚动条的滑块
扫一扫
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
