必须同时设置scrollbar-width: none（firefox）和::-webkit-scrollbar { width: 0; height: 0; }（chrome/safari/edge），且容器需有明确height和overflow-y: auto/scroll，缺一不可。
直接加 ::-webkit-scrollbar 样式却导致内容被挤、宽度跳变、圆角错位——这不是 CSS 写错了，是滚动条本身在占用布局空间，且各浏览器处理逻辑不一致。必须从「滚动条是否占位」和「样式生效范围」两个层面同时控制。
为什么美化后结构塌了：滚动条占位机制差异
滚动条默认会侵占容器的可用宽度（比如 width: 300px 的容器，出现滚动条后实际内容区只剩 ~284px），尤其在 overflow: auto 动态触发时，内容会突然右移或换行。这不是 bug，而是浏览器行为：
- Chrome/Edge 默认用
overflow: auto触发滚动条，它会“挤出”内容空间 - Firefox 的
scrollbar-width: thin不改变布局宽度，但仅限根滚动容器（html或显式设了overflow的块级元素） - iOS Safari 基本无视所有自定义，且系统级“自动隐藏滚动条”策略会覆盖 CSS 设置
让滚动条不占位的跨浏览器写法
核心思路：不让滚动条动态出现/消失，而是提前预留空间，并用视觉隐藏代替功能禁用。
- 对 WebKit 浏览器：用
::-webkit-scrollbar { width: 8px; }显式声明宽度，再配::-webkit-scrollbar { display: none; }隐藏——此时滚动能力保留，但不占位也不闪动 - 对 Firefox：必须写
scrollbar-width: none;（不是transparent），否则即使轨道透明，仍会预留空间 - 关键前提：容器必须设
overflow-y: scroll（不是auto），强制滚动条常驻，避免 hover 时布局重排 - 若需保持
auto行为又不想抖动：用scrollbar-gutter: stable;（Chrome 112+、Firefox 97+ 支持），它会在无滚动条时也预留 gutter 空间
::-webkit-scrollbar 成套失效的常见漏点
单独写 ::-webkit-scrollbar-thumb 没反应？大概率是链式依赖断了。
-
::-webkit-scrollbar必须设width（垂直）或height（水平），值不能为0或auto，推荐8px～12px -
::-webkit-scrollbar-track缺失时，::-webkit-scrollbar-thumb的background可能被忽略（尤其在 macOS Safari 上） -
::-webkit-scrollbar-thumb:hover必须独立写，父容器加:hover不触发 - 别给
body或html直接写伪元素——它只对「实际溢出的块级容器」生效，比如.list-container { overflow-y: auto; }
Firefox 和 Safari 的真实兼容边界
别浪费时间适配不存在的能力。
- Firefox 完全无视所有
::-webkit-伪类，scrollbar-color只在scrollbar-width: auto或thin时生效，设成none就彻底忽略颜色 - macOS Safari 16.4+ 才支持
scrollbar-width和scrollbar-color，但依然不支持::-webkit-scrollbar；且系统偏好中“自动隐藏滚动条”开启时，CSS 设置无效 - 移动端 iOS Safari 对
scrollbar-width: thin基本当auto处理，::-webkit-scrollbar-corner和::-webkit-scrollbar-button几乎无渲染效果
最易被忽略的一点：滚动条是否占位，和它是否可见，是两个独立开关。用 overflow-y: scroll + ::-webkit-scrollbar { display: none; } + scrollbar-width: none; 是目前唯一能稳定避开布局抖动的组合，其他任何“动态显示/隐藏”方案，在多浏览器混用场景下都可能暴露宽度计算偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
