CSS 隐藏滚动条但保留滚动功能？

Question

CSS 隐藏滚动条但保留滚动功能？

仓乃文 · Accepted Answer

有时需要滚动内容但不想显示滚动条，比如自定义滚动条场景。使用 CSS 可以隐藏滚动条同时保留滚动功能。

方案一：直接隐藏（最简单）：
```css
.container {
  overflow-y: auto;           /* 允许滚动 */
  scrollbar-width: none;      /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;   /* IE/Edge 隐藏 */
}
.container::-webkit-scrollbar {
  display: none;              /* Chrome/Safari 隐藏 */
}
```

方案二：自定义滚动条样式：
```css
.container::-webkit-scrollbar { width: 6px; }
.container::-webkit-scrollbar-track { background: #f1f1f1; }
.container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
```

补充说明：
- 方案一适用于不需要自定义样式的场景
- 方案二可以打造与 UI 风格统一的滚动条
- 移动端触摸滚动不受 scrollbar-width 影响
- 滚动条样式伪元素需要 WebKit 内核浏览器支持