firefox中用scrollbar-width: none可隐藏滚动条，仅对根元素或overflow为auto/scroll的块级元素生效；chrome/safari需用::-webkit-scrollbar设宽高为0并透明化；二者须组合使用且不可替代overflow: hidden。
Firefox里用scrollbar-width: none隐藏滚动条
这个属性只在Firefox中有效，且仅对根滚动容器（比如html或body）或设置了overflow: auto/scroll的块级元素起作用。它不会影响滚动行为，只是视觉上移除滚动条。
常见错误是把它写在div上却没设overflow，或者误以为它能在Chrome/Safari生效。
-
scrollbar-width必须配合overflow使用，否则无效 - 值只能是
auto、thin或none，没有hidden - 对
textarea、select等表单控件无效 - 不支持伪元素自定义，和
::-webkit-scrollbar完全无关
html {
scrollbar-width: none;
}
Chrome/Safari/Edge隐藏滚动条但保留滚动——用::-webkit-scrollbar
这是WebKit/Blink内核专属方案，通过把滚动条宽高设为0并隐藏所有伪元素来实现“隐形但可滚”。它不改变DOM结构，也不影响JavaScript的scrollTop或事件触发。
容易踩的坑是只写了::-webkit-scrollbar却漏掉::-webkit-scrollbar-track和::-webkit-scrollbar-thumb，导致部分浏览器仍显示残影或默认样式。
- 必须同时设置
width/height为0，且display: none不生效 - 父容器需有明确
overflow: auto或scroll，否则伪元素不渲染 - 移动端Safari对
::-webkit-scrollbar支持不稳定，iOS 16+才较可靠 - 不能用
visibility: hidden替代，它会让滚动区域失焦
div {
overflow: auto;
}
div::-webkit-scrollbar {
width: 0;
height: 0;
}
div::-webkit-scrollbar-track,
div::-webkit-scrollbar-thumb {
background: transparent;
}
跨浏览器兼容写法：CSS组合 + 注意力陷阱
没有单一CSS规则能通吃所有浏览器。必须同时写scrollbar-width: none（Firefox）和::-webkit-scrollbar（其余），再加一层保险：禁用拖拽滚动条的交互。
真正容易被忽略的是，即使滚动条不可见，用户仍可能用鼠标滚轮、方向键、触控板惯性滚动——这些都不受影响。但如果你还用了overscroll-behavior: contain之类，就得小心嵌套容器的滚动穿透问题。
- 别忘了给目标元素加
scrollbar-color: transparent transparent（Firefox额外兼容） - 避免在
body上直接隐藏，会导致页面整体滚动异常，优先作用于具体div - 某些Android WebView会忽略
::-webkit-scrollbar，需测试真机 - 用
getComputedStyle(el).overflow检查是否真被触发，而不是只看样式表
为什么不用overflow: hidden？它和隐藏滚动条不是一回事
overflow: hidden直接切断滚动能力，内容超出即被裁剪，无法用键盘或脚本滚动。而隐藏滚动条的核心诉求是“保持滚动功能，只藏UI”。
典型误用场景：为了“看起来没滚动条”，随手给容器加overflow: hidden，结果发现scrollTop设了没反应、Tab键无法聚焦溢出内容、屏幕阅读器也读不到被裁部分。
-
overflow: hidden→ 滚动功能彻底消失 -
scrollbar-width: none+::-webkit-scrollbar→ 滚动照常，只是看不见滑块 - 如果内容根本不需要滚动，那应该调整布局，而不是靠隐藏滚动条掩盖问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
