scrollbar-width: none仅在Firefox 64+有效，需容器有明确height/max-height、overflow为auto/scroll且内容溢出；::-webkit-scrollbar须同时设置scrollbar、track、thumb三者为width/height:0和background:transparent才可靠隐藏。
scrollbar-width: none 只在 Firefox 有效且需满足前提
scrollbar-width: none 是 Firefox 64+ 专属属性，其他浏览器完全忽略它。它不改变盒模型，也不影响布局计算——但前提是容器必须同时满足：
• 有明确的 height 或 max-height
• overflow 值为 auto 或 scroll（不能是 visible 或 hidden）
• 内容实际溢出，否则滚动条本就不存在，隐藏无意义
常见错误是把它加在 body 或 html 上却没设 height 和 overflow: auto，结果样式生效了，但页面根本不动——不是失效，是压根没触发滚动机制
::-webkit-scrollbar 需三者同设，否则滚动条局部残留
Chrome、Safari、Edge（Chromium 内核）必须用 ::-webkit-scrollbar 伪元素隐藏，但只写 display: none 或只设 width: 0 很容易翻车：
• ::-webkit-scrollbar 控制整体尺寸
• ::-webkit-scrollbar-track 控制轨道背景
• ::-webkit-scrollbar-thumb 控制滑块本身
漏掉任意一个，旧版 Safari 或某些 Chromium 衍生浏览器会回退显示默认灰色滑块
推荐统一用 width: 0; height: 0; background: transparent;，比 opacity: 0 更稳，避免 Safari 对透明度的渲染异常
overflow: hidden 不是隐藏滚动条的解法，而是禁用滚动
看到有人用 overflow: hidden 想“隐藏滚动条”，这是根本性误解：
• overflow: hidden 会直接裁剪溢出内容，用户无法滚动，功能彻底丢失
• 它也不隐藏滚动条——因为滚动条压根不会出现
• 如果你想要“视觉隐藏 + 功能保留”，必须保持 overflow-y: scroll 或 auto，再配合上述 CSS 隐藏手段
最容易被忽略的坑：父容器设置了 overscroll-behavior: contain，子容器看似不能滚，其实是滚动事件被拦截了，跟滚动条是否可见无关
IE/Edge Legacy 需 -ms-overflow-style: none，但已逐步淘汰
IE 10+ 和旧版 Edge（EdgeHTML 内核）支持 -ms-overflow-style: none，但它只对 overflow: auto 或 scroll 的元素生效，且不兼容现代 Edge（Chromium 内核）
目前实际项目中，除非明确要支持 IE，否则可跳过此规则
若仍需兼容，注意它和 ::-webkit-scrollbar 互不冲突，可以共存；但不要指望它在 Firefox 或新版 Edge 中起作用
真正麻烦的是混合环境：比如一个 textarea 在 Firefox 里靠 scrollbar-width 隐藏，在 Chrome 里靠伪元素隐藏，在 IE 里靠 -ms-overflow-style——三者缺一不可，且各自生效范围严格限定
立即学习“前端免费学习笔记（深入）”；
