当前位置：首页 > 文章列表 > 文章 > 前端 > 自定义滚动条样式CSS教程详解

自定义滚动条样式CSS教程详解

2026-02-09 13:27:41 0浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《自定义滚动条样式，CSS实现方法详解》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

Chrome和Edge中用::-webkit-scrollbar自定义滚动条仅限Chromium内核浏览器，需组合使用track和thumb伪元素；Firefox仅支持scrollbar-width和scrollbar-color两个属性调色；body上设置常失效，应优先作用于html元素。

如何在项目中实现自定义滚动条_通过CSS修改网页滚动条样式

Chrome 和 Edge 中如何用 `::-webkit-scrollbar` 自定义滚动条

只在基于 Chromium 的浏览器（Chrome、Edge、新版 Opera）中生效，Firefox 和 Safari 不支持。这是目前最常用、最可控的方式，但必须清楚它的作用域限制。

关键点是：它是一组伪元素组合，不能单独写 ::-webkit-scrollbar 就完事，至少要配 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 才能看见效果。

::-webkit-scrollbar 控制整体宽度/高度（横向滚动条用 height，纵向用 width）
::-webkit-scrollbar-track 是滚动轨道背景，建议设 background-color，不设可能透出父容器底色
::-webkit-scrollbar-thumb 是拖拽滑块，必须设 background-color 或 border-radius，否则默认不可见
可选加 ::-webkit-scrollbar-thumb:hover 做悬停反馈，但注意移动端无 hover

示例：

/* 纵向滚动条宽 8px */  
::-webkit-scrollbar { width: 8px; }  
::-webkit-scrollbar-track { background: #f1f1f1; }  
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }  
::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

Firefox 中能否自定义滚动条？`scrollbar-width` 和 `scrollbar-color` 能做什么

Firefox 只支持两个 CSS 属性，能力非常有限：不能改宽度、不能加圆角、不能设阴影，仅能调颜色。

scrollbar-width 只接受 auto、thin、none 三个值；scrollbar-color 接收两个颜色值，顺序是 thumb track。

必须写在根元素（:root 或 html）上才全局生效，局部容器无效
scrollbar-width: thin 在 Firefox 97+ 才支持，旧版本会回退到 auto
若同时写了 WebKit 和 Firefox 规则，浏览器各自按规则解析，不会冲突

示例：

:root {  
  scrollbar-width: thin;  
  scrollbar-color: #888 #f5f5f5;  
}

为什么给 `body` 加自定义滚动条经常失效？

因为 body 默认不是滚动容器——真正滚动的是 document.documentElement（即 html 元素）。多数情况下，对 body 设置 ::-webkit-scrollbar 没用。

应优先对 html 写样式，尤其全页滚动场景
若只希望某个 div 有自定义滚动条，需确保它有明确的 height 或 max-height + overflow: auto，再对其写伪元素
某些重置 CSS（如 normalize.css）会设 html { overflow-y: scroll; }，影响实际滚动层，需检查 computed styles
使用 overscroll-behavior 可防止滚动穿透，但它和滚动条样式无关，别混淆