CSS3如何隐藏滚动条

在 CSS3 中，隐藏滚动条的常见做法取决于你希望达到的效果：

• ✅ 完全隐藏滚动条（但仍可滚动）
• ✅ 仅隐藏滚动条样式（保留滚动行为）
• ✅ 在某些浏览器中隐藏，但保留可滚动性

下面是最常用、最兼容的几种方案：

✅ 方案一：隐藏滚动条，但仍可滚动（推荐）

Webkit 内核浏览器（Chrome / Edge / Safari）

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

<div class="hide-scrollbar">
  内容...
</div>

✅ 优点：滚动条消失，仍可滚动
❌ 缺点：仅支持 Webkit

✅ 方案二：同时兼容 Firefox

.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome、Safari、Edge */
}

✅ 推荐实际项目中使用

✅ 方案三：IE / 旧 Edge（已逐渐淘汰）

.hide-scrollbar {
  -ms-overflow-style: none;
}

完整兼容写法：

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

✅ 方案四：用 overflow 隐藏滚动条（不推荐）

.hide-scrollbar {
  overflow: hidden;
}

❌ 滚动功能也会被禁用

✅ 方案五：视觉隐藏（仍然有滚动条占位）

.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

✅ 滚动条宽度变为 0（部分浏览器有效）

✅ 常见应用场景示例

横向滚动列表

.scroll-x {
  overflow-x: auto;
  scrollbar-width: none;
}

.scroll-x::-webkit-scrollbar {
  display: none;
}

<div class="scroll-x">
  <div style="width: 2000px;">超宽内容</div>
</div>

✅ 总结（推荐写法）

✅ 最佳实践

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

如果你有 特定场景（如 Vue / React / 移动端 / 微信小程序 / 某个 UI 框架），我可以给你更精准的写法。