通过 css 的 `::-webkit-scrollbar` 伪元素隐藏浏览器默认滚动条，既可实现视觉上无滚动条的效果，又完全保留原生滚动行为，无需 javascript 干预，兼容性良好且性能优异。
在 Web 开发中，常有设计需求要求“隐藏滚动条但保留滚动能力”——例如打造沉浸式单页导航、全屏轮播或极简 UI 布局。此时若错误使用 overflow: hidden，将直接禁用滚动，违背交互初衷；而真正可行的方案是仅隐藏滚动条视觉表现，不干扰底层滚动机制。
✅ 正确方案：CSS 伪元素隐藏（推荐）
现代主流浏览器（Chrome、Edge、Safari）支持 ::-webkit-scrollbar 系列伪元素，用于自定义或隐藏滚动条：
/* 隐藏所有方向的滚动条（Webkit 内核） */
::-webkit-scrollbar {
display: none;
}
/* 补充：Firefox 支持 scrollbar-width（需单独设置） */
* {
scrollbar-width: none; /* Firefox 隐藏滚动条 */
}⚠️ 注意：scrollbar-width: none 是 Firefox 64+ 的标准属性，而 *-ms-ime-align 等 IE 专属属性已废弃，IE 不支持此方案。如需兼容 IE，需采用 overflow: overlay + 自定义滚动容器等降级策略（本文不展开）。
? 完整示例代码
以下是一个开箱即用的 HTML 示例，页面内容足够长以触发滚动，但滚动条完全不可见：
隐藏滚动条但可滚动 中部区域
依然可滚动，但无滚动条
底部区域
完美支持键盘/触控/鼠标滚轮
? 补充说明与注意事项
- 无需 JavaScript：本方案纯 CSS 实现，零 JS 依赖，避免了定时器监听、scroll 事件频繁触发等性能隐患；
- 滚动行为 100% 原生：键盘方向键、空格键、PageUp/PageDown、鼠标滚轮、触控板惯性滚动、触摸拖拽等全部保留；
- 响应式友好：隐藏逻辑作用于整个文档，自动适配移动端（iOS Safari 同样生效）；
-
局限性提示：
- Safari 16.4+ 对 scrollbar-width: none 支持不稳定，建议搭配 ::-webkit-scrollbar 双保险；
- 若需在特定容器（如 div）内隐藏滚动条，请将伪元素选择器限定为该容器后代，例如 .custom-scroll::-webkit-scrollbar；
- 不要混淆 overflow: scroll 和 overflow: auto：前者强制显示滚动条（即使内容未溢出），后者按需显示——隐藏时二者效果一致。
✅ 总结
隐藏滚动条 ≠ 禁用滚动。最简洁、高效、符合标准的解法是利用浏览器原生支持的伪元素进行视觉隐藏。它轻量、可靠、语义清晰，是现代前端开发中处理此类需求的首选实践。
