overflow: hidden会彻底破坏滚动能力，因为它不隐藏滚动条，而是让浏览器不创建滚动上下文，导致scrollTop/scrollLeft失效、scrollIntoView静默失败、所有滚动交互失灵，且影响可访问性。
为什么 overflow: hidden 会彻底破坏滚动能力
这个值不是“隐藏滚动条”，而是让浏览器根本不去创建滚动上下文。一旦用了 overflow: hidden，scrollTop 和 scrollLeft 设置无效、读取恒为 0；scrollIntoView() 静默失败；鼠标滚轮、触控板惯性、方向键、PageUp/Down 全部失灵；移动端 Safari 还可能触发弹性回弹并意外暴露原生滚动条；屏幕阅读器也无法聚焦溢出区域内容，a11y 工具会报 focusable content is not reachable。
::-webkit-scrollbar { display: none } 为何常不生效
这条规则只在满足三个硬性条件时才渲染伪元素：
- 目标元素必须有明确的
height或max-height（仅靠flex: 1或100vh不稳定） - 必须显式设置
overflow-y: auto或overflow-y: scroll（overflow: auto可以，但overflow: visible不行） - 规则必须写在
标签或外部 CSS 文件中，不能用内联样式
旧版 Safari（iOS 15 / macOS Monterey 12.3 及更早）不支持 display: none，需降级为：
.scroll-container::-webkit-scrollbar {
width: 0;
height: 0;
}
.scroll-container::-webkit-scrollbar-track,
.scroll-container::-webkit-scrollbar-thumb {
background: transparent;
}
Firefox 中 scrollbar-width: none 没反应的真正原因
这个属性只在 Firefox 64+ 生效，且有严格前提：
- 只能作用于设置了
overflow-y: auto或overflow-y: scroll的块级元素（如div、section），不能写在html或body上试图全局隐藏（Firefox 会忽略） - 值只能是
auto、thin、none，没有hidden或off - 必须搭配
scrollbar-color: transparent transparent做双重保险，否则某些版本仍可能残留轨道色块
典型错误：写了 div { scrollbar-width: none; } 却漏了 overflow-y —— 此时属性存在，但滚动上下文未建立，自然无效。
完整兼容方案必须三套并行
现代页面要真正跨浏览器隐藏滚动条又保留滚动，必须同时覆盖三类引擎：
- WebKit/Blink（Chrome/Safari/Edge）：用
::-webkit-scrollbar系列伪元素 - Gecko（Firefox）：用
scrollbar-width: none+scrollbar-color - 旧版 Trident/EdgeHTML（IE / 旧 Edge）：用
-ms-overflow-style: none
三者都依赖 overflow-y: auto（或 scroll）生效，缺一不可。最易被忽略的是：即使所有 CSS 都写对了，若容器高度由 flex 或 grid 自动撑开而没设 height/max-height，WebKit 规则仍不会触发——这点在响应式布局里尤其隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
