Chrome/Firefox中滚动条消失却无法滚动，主因是overflow未触发或隐藏后未补偿占位空间；Webkit需::-webkit-scrollbar{width:0}，Firefox需html{scrollbar-width:none}，且须手动抵消滚动条宽度。
Chrome/Firefox里overflow: scroll滚动条消失但滚不动？
直接设display: none在::-webkit-scrollbar上，只会隐藏滚动条视觉部分，不影响滚动行为——但这是Webkit系（Chrome/Safari）专属写法，Firefox不认这个伪元素，所以用它后Firefox里滚动条既没隐藏、也无样式控制。更关键的是：如果父容器同时写了overflow: hidden或overflow: auto但内容没溢出，那根本不会触发滚动，自然“滚不动”。
-
display: none只能用于::-webkit-scrollbar及其子伪元素（如::-webkit-scrollbar-thumb），不能用在body或容器本身上 - 确保容器有明确高度+
overflow: auto或overflow-y: scroll，否则滚动机制不激活 - Firefox需额外用
scrollbar-width: none（仅支持Firefox 64+），且只对html或body生效有限
::-webkit-scrollbar设display: none后页面布局错位？
隐藏滚动条后，原滚动条占位空间并不会自动回收——Webkit下即使滚动条不可见，容器仍按“有滚动条”计算宽度，导致右侧留白或内容被遮挡。这不是bug，是浏览器默认保留滚动条槽位的渲染策略。
- 必须配合
padding-right或margin-right手动补偿（通常12px到17px，取决于系统DPI） - 更稳妥的做法是用
overflow: overlay（已废弃，仅旧Safari支持），或改用overflow: auto+ 伪元素全隐藏，再用width: calc(100% + 16px)反向抵消 - 若容器用
flex或grid布局，错位更容易被放大，建议优先在滚动容器上加margin-left: -16px并设overflow-x: hidden
Firefox和Safari隐藏滚动条写法不一致怎么办？
没有跨浏览器统一方案。Webkit靠伪元素，Firefox靠scrollbar-width，Safari 16.4+开始部分支持scrollbar-width但行为不稳定。硬要兼容，就得条件性写两套。
- Webkit系（Chrome/Safari）：
::-webkit-scrollbar { width: 0; height: 0; }（比display: none更安全，避免某些版本解析异常） - Firefox：
html { scrollbar-width: none; }，注意仅html和body生效，且必须是根元素 - Safari 16.4+可尝试
scrollbar-width: thin配合透明色，但none仍可能被忽略，得回退到::-webkit-scrollbar方案
移动端iOS Safari滚动卡顿或失效？
iOS Safari对隐藏滚动条的优化很激进，一旦检测到::-webkit-scrollbar被设为0宽/高，可能直接禁用惯性滚动或触控响应，尤其在position: fixed容器里。
立即学习“前端免费学习笔记（深入）”；
- 避免在
fixed定位的弹层内用::-webkit-scrollbar { width: 0 }，改用overflow: scroll+-webkit-overflow-scrolling: touch - 真机测试时发现卡顿，先检查是否同时用了
transform: translateZ(0)或will-change: transform，这些会干扰滚动线程 - iOS 16.4后，部分隐藏方案触发
scroll事件延迟，监听时要用requestAnimationFrame节流，别直接绑onscroll
scrollbar-width的实现差异。 
