通过 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 示例，页面内容足够长以触发滚动，但滚动条完全不可见：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>隐藏滚动条但可滚动</title>
<style>
/* 关键：隐藏滚动条 */
::-webkit-scrollbar {
display: none;
}
* {
scrollbar-width: none; /* Firefox */
}
/* 页面基础样式（仅作演示） */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
background: #f9f9f9;
}
.section {
min-height: 100vh;
padding: 8rem 5%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: white;
}
h1 { color: #333; }
</style>
</head>
<body>
<div class="section"><h1>顶部区域</h1><p>滚动向下查看其他区块 →</p></div>
<div class="section"><h1>中部区域</h1><p>依然可滚动，但无滚动条</p></div>
<div class="section"><h1>底部区域</h1><p>完美支持键盘/触控/鼠标滚轮</p></div>
</body>
</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：前者强制显示滚动条（即使内容未溢出），后者按需显示——隐藏时二者效果一致。
✅ 总结
隐藏滚动条 ≠ 禁用滚动。最简洁、高效、符合标准的解法是利用浏览器原生支持的伪元素进行视觉隐藏。它轻量、可靠、语义清晰，是现代前端开发中处理此类需求的首选实践。
