::-webkit-scrollbar { display: none } 有时不生效，因需同时满足三个条件：目标元素有明确 height/max-height、设置 overflow-y: auto/scroll（非 visible）、样式须在 或外链 CSS 中（禁用内联）；iOS 15 及更早版本不支持该写法，应降级为 width: 0; height: 0; background: transparent。
为什么 ::-webkit-scrollbar { display: none } 有时不生效
这个写法在 Chrome/Safari/Edge 中看似最简，但实际常因三个硬性条件缺失而完全不渲染伪元素：目标元素必须有明确的 height 或 max-height；必须设置 overflow-y: auto 或 overflow-y: scroll（overflow: visible 不触发）；样式必须写在 <style></style> 标签或外部 CSS 文件里，内联样式无效。iOS Safari（尤其是 iOS 15 及更早）甚至会忽略 display: none，需降级为 width: 0; height: 0; background: transparent。
::-webkit-scrollbar 必须同时控制哪几个伪元素
只写 ::-webkit-scrollbar 主体，漏掉轨道和滑块，旧版 Safari 或某些 Chromium 版本仍会显示灰色残影。必须三者齐备：
-
::-webkit-scrollbar：设width: 0和height: 0（比display: none更兼容） -
::-webkit-scrollbar-track：设background: transparent，避免默认灰底露出 -
::-webkit-scrollbar-thumb：同样background: transparent，并加border: none防止旧 Safari 渲染边框
移动端 Safari 的特殊处理
iOS Safari 对 ::-webkit-scrollbar 支持极不稳定——iOS 16+ 才较可靠，iOS 15 及更早版本基本忽略该伪元素。不要对 iOS 做任何适配尝试，它既不渲染滚动条，也不响应这些样式。若需抑制弹性回弹带来的意外滚动条闪现，可加 overscroll-behavior: contain，但这和隐藏滚动条无关，只是减少误触感知。
容易被忽略的父容器干扰
即使所有伪元素都写对了，滚动功能仍“失效”，大概率是父容器设置了 overscroll-behavior: contain 或 overflow: hidden，导致子容器滚动事件被拦截或上下文被砍断。检查 DevTools 的 Elements 面板，确认目标元素确实拥有滚动上下文（即 Computed 中 overflow-y 是 auto 或 scroll，且内容高度超出了它的 height）。别忘了，overflow: hidden 不是“隐藏滚动条”，它是彻底关闭滚动能力——scrollTop 失效、scrollIntoView() 静默失败、键盘和屏幕阅读器都无法访问溢出内容。
立即学习“前端免费学习笔记（深入）”；
