CSS修改滚动条的默认样式

最新推荐文章于 2023-12-28 14:47:08 发布

鸭绒

最新推荐文章于 2023-12-28 14:47:08 发布

阅读量804

点赞数

CC 4.0 BY-SA版权

分类专栏：布局效果文章标签： css3 css 前端

本文链接：https://blog.youkuaiyun.com/weixin_43334673/article/details/115092094

布局效果专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何使用CSS3修改滚动条的默认样式，包括通过::-webkit-scrollbar伪元素设置整体大小，通过::-webkit-scrollbar-thumb调整滑块样式，以及使用::-webkit-scrollbar-track改变滚动轨道的外观。提供了一个实际示例。

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

滚动条的默认样式可能不能让人满意，下面修改滚动默认样式：

效果图：

在这里插入图片描述
修改滚动条样式涉及三个伪类：

::-webkit-scrollbar（设置整个滚动条的大小）
::-webkit-scrollbar-thumb (设置滚动条滑块样式)
::-webkit-scrollbar-track（设置滚动轨道的样式）

示例：

::-webkit-scrollbar {
  width: 5px;//这是竖向滚动条的宽度。如果是横向滚动条则设置height
}
::-webkit-scrollbar-thumb {
  border-radius: 2.5px;
  background: #434241;
}
::-webkit-scrollbar-track {
  background: #0e0d0d;
  border-radius: 2.5px;
}