必须显式设置容器高度并确保父容器未设overflow-hidden，才能建立滚动上下文；隐藏滚动条只是后续步骤。
加了隐藏滚动条的样式，内容却不能滚——不是样式写错了，而是滚动能力根本没建立起来。滚动条只是“副产品”，真正决定能不能滚的是容器是否满足溢出条件。
overflow-y: scroll 但不滚动？先看高度有没有被限制
滚动需要两个前提：内容超出、容器有边界。如果容器高度是 auto 或没设任何高度约束，它会无限撑开，自然没有溢出，也就不会触发滚动。
- 必须显式设置容器高度，比如
h-64、max-h-96或style="height: 200px" - 在 Flex 布局中，
flex: 1不等于“有高度”——父容器必须有明确高度（如h-screen或flex-col+h-full） - Grid 子项同理，
grid-row或minmax()需配合h-full才能形成滚动上下文
父容器 overflow: hidden 直接掐断子元素滚动
这是最隐蔽也最常见的坑：父元素设了 overflow-hidden，子元素哪怕写了 overflow-y-auto，浏览器也不会给它创建滚动上下文。
- DevTools 里选中目标元素，看
Computed面板里overflow-y是否被计算为visible（说明被父级覆盖） - 临时删掉父级的
overflow-hidden，如果滚动突然生效，就坐实了这个问题 - React/Vue 中动态渲染时，父容器可能初始高度为 0，加载后未重排，需用
ref+offsetHeight强制触发重绘
隐藏滚动条的 CSS 在 Firefox/IE 中失效或误判
::-webkit-scrollbar { display: none } 只对 WebKit 有效；Firefox 要靠 scrollbar-width: none，但它只在该元素本身是滚动容器时才起作用。
- Firefox 不支持
::-webkit-scrollbar，也不认-ms-overflow-style: none（Edge 已弃用） -
scrollbar-width: none必须写在设置了overflow-y: auto的同一元素上，且该元素要有固定高度 - 不要混用
tailwind-scrollbar-hide和tailwind-scrollbar插件，JIT 编译可能漏掉其中一条规则
移动端 touch 滚动被禁用或卡住
iOS Safari 对 overflow: scroll 的支持依赖 -webkit-overflow-scrolling: touch，但这个属性已被废弃，且容易和 position: fixed 冲突。
- 移除所有
-webkit-overflow-scrolling声明，改用现代方案（如overscroll-behavior: contain） - 检查是否有
body或html上写了overflow: hidden—— 这会全局锁死滚动 - 绝对定位元素若覆盖整个视口（如弹窗遮罩），需确保其
pointer-events: none或正确处理z-index层级
真正关键的不是怎么藏滚动条，而是先让容器“意识到自己该滚”。所有隐藏技巧都建立在滚动已生效的前提下，否则就是给空气化妆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
