通过 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：前者强制显示滚动条（即使内容未溢出），后者按需显示——隐藏时二者效果一致。

✅ 总结

隐藏滚动条 ≠ 禁用滚动。最简洁、高效、符合标准的解法是利用浏览器原生支持的伪元素进行视觉隐藏。它轻量、可靠、语义清晰，是现代前端开发中处理此类需求的首选实践。