scrollbar-width: none在Firefox中失效的常见原因：未设置overflow:auto/scroll、元素无内容溢出、缺少明确高度、与overflow:hidden共存、选择器未命中可滚动元素。
scrollbar-width: none 在 Firefox 中失效的常见原因
直接写 scrollbar-width: none 却没效果，大概率是选择器没命中目标元素，或者该元素本身没触发滚动上下文。Firefox 只对设置了 overflow 且内容溢出的块级元素生效，且不支持伪类（如 :hover）内动态启用。
必须确保：
-
scrollbar-width: none写在具有overflow-y: auto或scroll的元素上，不能只写在父容器上而忽略子容器是否真正可滚动 - 该元素需有明确高度（
height或max-height），否则 Firefox 不认为需要滚动条 - 不要和
overflow: hidden共存——那会直接禁用滚动，不是“隐藏但保留”
::-webkit-scrollbar{display: none} 在 Safari 上不生效怎么办
Safari 16.4+ 对 ::-webkit-scrollbar 的支持变严格：如果容器没有显式设置 overflow，或使用了 contain: paint 等隔离属性，伪元素可能被跳过渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
::-webkit-scrollbar规则写在和overflow同一选择器下，避免分离定义（例如不要分开写.box { overflow: scroll; }和.box::-webkit-scrollbar { display: none; }在不同 CSS 文件中） - 若用
position: absolute容器，确保其overflow值未被层叠覆盖（检查 computed style 中overflow是否为visible） - Safari 对
display: none的滚动条伪元素有缓存行为，强制刷新（Cmd+Shift+R）或禁用样式缓存可验证真实效果
IE/Edge Legacy 的 -ms-overflow-style: none 必须配 overflow 才起作用
-ms-overflow-style: none 是 IE10+ 和旧版 Edge（EdgeHTML）专用，但它不会“自动激活滚动”，而是仅隐藏已存在的滚动条。如果元素本身没滚动能力，它就什么也不做。
关键点：
- 必须同时设置
overflow-y: scroll（或auto），且内容实际超出容器高度 - 该属性不支持
overflow: visible或overflow-x单独启用时生效——垂直滚动条隐藏依赖overflow-y - 新版 Chromium Edge 已弃用此属性，仅靠
::-webkit-scrollbar+scrollbar-width即可覆盖
跨浏览器组合写法必须按顺序覆盖，且不可省略任何一项
没有“一个规则通吃”的写法。三者缺一不可，且顺序影响优先级：
.scroll-container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/旧 Edge */
}
.scroll-container::-webkit-scrollbar {
display: none; /* Chrome/Safari/新 Edge */
}
注意：
-
scrollbar-width和-ms-overflow-style是普通 CSS 属性，写在主选择器里；::-webkit-scrollbar是伪元素，必须单独声明 - 如果用
overflow: auto，需确保内容在初始状态下就溢出，否则滚动条根本不会生成，隐藏也就无从谈起 - 移动端 Safari（iOS 16+）有时会忽略
display: none，改用width: 0 !important更可靠
最易被忽略的是：所有这些规则都依赖“滚动上下文真实存在”。哪怕只差 1px 高度，或父元素用了 display: flex 且未设 align-items: flex-start 导致子元素 baseline 对齐挤占空间，都会让滚动失效——此时隐藏滚动条就变成纯黑盒，连调试都难定位。
