页面滚动条全局样式设置

weixin_34082177

于 2019-02-27 21:25:00 发布

阅读量496

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/crazycode2/p/10447103.html

本文详细介绍了如何使用CSS重置滚动条的样式，包括滚动条的整体样式、内部小方块的样式以及滚动条轨道的样式。通过具体代码示例，展示了如何设置滚动条的宽度、高度、圆角、阴影及背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重置滚动条样式：

/*滚动条样式*/
::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}
::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #e0e5eb;
}
::-webkit-scrollbar-track { /*滚动条里面轨道*/
    // -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    // background: rgba(0,0,0,0.1);
}

转载于:https://www.cnblogs.com/crazycode2/p/10447103.html