firefox 用 scrollbar-width: none 可隐藏视觉滚动条但保留滚动功能，其他浏览器需用 ::-webkit-scrollbar { width: 0 } 等伪元素实现；二者均需确保容器有高度限制且内容溢出，不可用 overflow: hidden 或 pointer-events: none 替代。
Firefox 用 scrollbar-width 隐藏滚动条但保留滚动功能
Firefox 是唯一原生支持 scrollbar-width 的浏览器，它能真正“隐藏视觉滚动条”而不禁用滚动——这点和 overflow: hidden 或 overflow: overlay（已废弃）完全不同。
该属性只在 Firefox 64+ 生效，其他浏览器完全忽略，所以必须搭配其他方案做兼容。
-
scrollbar-width: none：彻底隐藏滚动条（仍可滚，支持鼠标拖拽、键盘方向键、触摸板惯性滚动） -
scrollbar-width: thin：显示窄版滚动条（Firefox 自动控制样式，不可进一步定制） - 不写该属性或设为
auto：显示默认宽度滚动条
Chrome / Edge / Safari 必须用伪元素 + 覆盖策略
这些浏览器不支持 scrollbar-width，只能靠 ::-webkit-scrollbar 系列伪元素把滚动条“视觉上抹掉”，同时确保容器仍可滚动。
关键不是“隐藏”，而是“让滚动条透明且不占空间”，否则容易误触或触发布局偏移。
- 必须设置
width或height为0（仅 WebKit 内核有效），不能只设opacity: 0或visibility: hidden - 要同时覆盖
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb三者，否则部分浏览器仍会渲染残影 - 若容器有
padding-right或固定宽度，隐藏后可能造成内容被遮挡，需额外加padding-right: 0或用calc()补偿
.scroll-container {
overflow-y: auto;
scrollbar-width: none; /* Firefox */
}
.scroll-container::-webkit-scrollbar {
width: 0;
}
.scroll-container::-webkit-scrollbar-track {
background: transparent;
}
.scroll-container::-webkit-scrollbar-thumb {
background: transparent;
border: none;
}
滚动行为不受影响，但某些交互可能失效
视觉隐藏滚动条后，原生滚动功能基本保留，但以下情况需注意：
- 用户无法直接点击/拖拽滚动条区域（因为没视觉反馈），但鼠标滚轮、触摸板、键盘
PageDown、Home等仍有效 - 移动端 Safari 在
overflow: auto容器中，若未设置-webkit-overflow-scrolling: touch（iOS 15+ 已弃用），可能出现卡顿或无法滑动 - 某些辅助工具（如屏幕阅读器）依赖滚动条的 ARIA 属性，纯视觉隐藏不影响语义，但若用
aria-hidden="true"错误地隐藏了滚动容器，会导致可访问性问题
不要用 overflow: hidden 或 pointer-events: none 替代
这两个是常见误区：前者直接禁用滚动，后者会让整个容器失去所有鼠标事件（包括滚动），和“隐藏但可用”目标背道而驰。
-
overflow: hidden→ 滚动被截断，内容不可达 -
pointer-events: none→ 鼠标滚轮失效，触摸板滑动也大概率失效（取决于父级事件捕获） - 真正安全的做法只有两种：
scrollbar-width: none（Firefox） +::-webkit-scrollbar { width: 0 }（其他）
跨浏览器一致生效的前提是：容器明确设置了 height 或 max-height，且内容真实溢出。否则滚动机制本身不会触发，隐藏也就无从谈起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
