CSS自定义滚动条

最新推荐文章于 2025-03-04 14:35:06 发布

夜雨听寒

最新推荐文章于 2025-03-04 14:35:06 发布

阅读量650

点赞数 2

分类专栏：前端文章标签： css

本文链接：https://blog.youkuaiyun.com/teemology/article/details/90748249

版权

本文详细介绍了如何使用CSS自定义滚动条，包括在Chrome和Mozilla中隐藏和修改滚动条样式的方法。通过设置伪类和特定属性，可以实现滚动条的宽度、颜色、透明度等效果的调整。

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

CSS自定义滚动条

样板html结构
如何实现滚动条？
Chrome中隐藏滚动条
Chrome中自定义滚动条样式
Mozilla中修改滚动条样式

样板html结构

一个类名为parent的容器包裹了一些lorem。

<body>
    <div class="parent">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, delectus
      libero cupiditate sapiente excepturi, ea hic, exercitationem quisquam ad
      dolor asperiores quibusdam ut natus mollitia velit voluptate. Alias,
      corporis numquam!Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Iusto, delectus libero cupiditate sapiente excepturi, ea hic,
      exercitationem quisquam ad dolor asperiores quibusdam ut natus mollitia
      velit voluptate. Alias, corporis numquam!
    </div>
  </body>

如何实现滚动条？

在容器元素中一定要有给定的高度和overflow属性：

.parent {
	height: 300px;
	overflow-y: scroll;		// 如果是水平方向则为overflow-x: scroll，同时给定宽度。
}

Chrome中隐藏滚动条

伪类-webkit-scrollbar表示webkit中滚动条

最低0.47元/天解锁文章