Chrome中需用::-webkit-scrollbar系列伪元素（必须成套定义且作用于可滚动容器），Firefox则必须用scrollbar-width和scrollbar-color属性配合overflow生效，二者互不兼容，须分浏览器分别设置。
全局滚动条样式在 Chrome/Firefox 中怎么生效
直接写 ::-webkit-scrollbar 只对 Chromium 系统（Chrome、Edge、新版 Safari）有效；Firefox 完全不认这个伪元素，得用 scrollbar-width 和 scrollbar-color 这两个 CSS 属性。两者必须同时配置，否则 Firefox 会回退到默认样式。
常见错误是只写 WebKit 部分，结果上线后在 Firefox 里滚动条还是丑且粗——这不是 bug，是浏览器根本没解析那套规则。
-
scrollbar-width可取值：auto（默认）、thin（推荐）、none（慎用，影响可访问性） -
scrollbar-color接两个颜色值：thumb-color track-color，顺序不能反，否则失效 - 若要隐藏滚动条但保留滚动能力，
overflow: overlay已被废弃，正确做法是overflow-y: scroll+scrollbar-width: none（Firefox）+::-webkit-scrollbar { display: none }（WebKit）
为什么给 html 或 body 设置滚动条样式经常失效
因为滚动条实际属于“根滚动容器”，在多数情况下是 document.documentElement（即 html 元素），但某些布局下（比如用了 height: 100vh + overflow-y: auto 的子容器），滚动行为会下沉到那个子容器上，此时全局样式就不起作用了。
典型场景：你写了 html::-webkit-scrollbar，但页面真正滚动的是 #main 这个 div —— 那它的滚动条就得单独写 #main::-webkit-scrollbar。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先用开发者工具选中滚动区域，看
overflow属性在哪一级生效 - 如果
body高度不足 100%，而html没设height: 100%，html根本不会产生滚动条 - Vue/React SPA 中，路由容器（如
router-view包裹的div）常是真实滚动体，样式必须落到它身上
scroll-snap 页面里滚动条样式要不要额外处理
不需要。CSS scroll-snap-type 和 scroll-snap-align 与滚动条样式完全正交——前者控制滚动吸附行为，后者只改 UI 表现。但要注意：如果你用 position: fixed 导航栏遮住了右侧滚动条，再好看的样式也白搭。
这时候问题不在样式，而在布局层级。滚动条被盖住，用户根本点不到，样式再精致也没意义。
- 优先确保滚动条物理可见：用 Flex 布局替代
position: fixed（见知识库中body设为flex-col h-screen方案） - 滚动容器必须有明确高度（如
100vh）和overflow-y: auto，否则scroll-snap不触发，滚动条也不出现 - iOS Safari 对
::-webkit-scrollbar支持极差，基本忽略；别在 iOS 上依赖自定义滚动条样式
如何让自定义滚动条在移动端不破坏体验
绝大多数移动端浏览器（包括 iOS Safari、Android Chrome）会忽略或部分忽略自定义滚动条样式。强行加样式不仅无效，还可能因触发重绘导致滚动卡顿。
更现实的做法是：承认移动端滚动条“不可见但可用”，把精力放在优化触控滚动惯性、scroll-behavior: smooth 和 -webkit-overflow-scrolling: touch（iOS 旧版需保留）上。
- 不要给
html或body加scrollbar-width: thin试图在 Android 上变细——它只在桌面 Firefox 有效 - 移动端真要视觉提示，用 JS 监听
scroll，动态显示一个轻量div模拟进度条，而非改原生滚动条 - 若用 iframe 嵌套内容，滚动条样式必须单独作用于 iframe 内部文档，父页样式无法穿透
