::-webkit-scrollbar 无效主因是渲染条件未满足：需设置 overflow-y 为 auto/scroll、容器有明确 height/max-height，且规则须在 style 块或外链 css 中；ios safari 完全不支持该伪元素。
::-webkit-scrollbar 在 Chrome/Safari/Edge 中为什么没反应
写了 ::-webkit-scrollbar { display: none } 却还看到滚动条，大概率不是语法错，而是渲染条件不满足。WebKit 内核只在“确认需要滚动”时才生成该伪元素，否则规则压根不参与计算。
-
overflow-y必须是auto或scroll，不能是visible或漏写 - 容器必须有明确的
height或max-height，否则内容不溢出，滚动上下文不成立 - 不能写在内联
style=""里——::-webkit-scrollbar只支持<style></style>块或外部 CSS 文件 - 旧版 Safari（iOS 15 及更早）对
display: none支持差，建议改用width: 0; height: 0; background: transparent
::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 能省略吗
能省略，但不推荐。部分 Chromium 版本（如某些 Edge 115+）和 macOS Safari 17.4+ 在只设 ::-webkit-scrollbar { width: 0 } 时，仍可能渲染出极细的滑块残影，尤其当容器有背景色对比强烈时。
- 最简可靠写法是三者都声明：
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb - 不用
opacity: 0或visibility: hidden——它们会让滚动区域失焦，导致触摸板拖拽失效 -
border: none加在::-webkit-scrollbar-thumb上可防止某些 Safari 版本默认边框透出
隐藏后滚动功能失效？先检查 overflow 是否被覆盖
最常见的“滚动消失”不是因为隐藏代码错了，而是 overflow 属性被其他样式意外重置了。比如父级加了 overflow: hidden，或 flex 容器里子项没设 min-width: 0 导致内容撑开后溢出被截断。
- 打开浏览器开发者工具，选中目标元素，看
Computed面板里的overflow-y是否真为auto或scroll - 检查是否被框架 reset（如 Normalize.css）或 UI 库（如 Ant Design）的全局样式覆盖
- 移动端 Safari 对
overflow: auto容器有特殊要求：iOS 15.4+ 建议补上-webkit-overflow-scrolling: touch（虽已废弃但仍有兼容价值）
为什么 iOS Safari 上写了也没用
iOS Safari（所有版本）完全忽略 ::-webkit-scrollbar 系列伪元素。这不是 bug，是 WebKit 的有意限制——它默认不渲染滚动条 UI，也不允许 CSS 干预。
- 别浪费时间调试 iOS 下的
::-webkit-scrollbar规则，它不会生效，还可能触发奇怪的重绘异常 - 如果需要统一视觉，只能接受 iOS 默认“无滚动条”状态；若想强制显示，得用 JS 模拟滚动（代价高，且破坏原生惯性）
- macOS Safari 桌面版支持，但仅限于悬停时显示；要“始终隐藏”，需额外加
-webkit-appearance: none，且仅对自定义容器有效，body不适用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
