修改浏览器的滚动条自带的样式

最新推荐文章于 2024-12-11 15:20:33 发布

lilyheart1

最新推荐文章于 2024-12-11 15:20:33 发布

阅读量801

点赞数 1

分类专栏：前端文章标签：修改滚动条的样式

本文链接：https://blog.youkuaiyun.com/lilyheart1/article/details/115066162

版权

前端专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了如何在项目中统一滚动条样式，覆盖谷歌浏览器和IE的CSS设置，提升视觉效果。通过修改`::-webkit-scrollbar`等属性，实现更美观的滚动条外观。

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

这段时间在做项目时，列表中通过overflow：auto；设置的滚动条样式太难看，前端leader建议将项目中有滚动条的地方统一样式，在查阅了资料后，在谷歌浏览器上的样式经测试修改完善。如：

1.修改谷歌浏览器滚动条的样式：

包含7个属性：

::-webkit-scrollbar 滚动条整体部分，可以设置宽度；
::-webkit-scrollbar-button 滚动条两端的按钮；
::-webkit-scrollbar-track 外层轨道；
::-webkit-scrollbar-track-piece 内层滚动槽；
::-webkit-scrollbar-thumb 滚动的滑块；
::-webkit-scrollbar-corner 边角；

::-webkit-resizer 定义右下角拖动块的样式；


/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width:12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px;
    background:#ffffff4d;
}
::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
    background:#666;
}
::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,0,0,0.4);
}