如何在CSS中使用scrollbar-width隐藏滚动条-css教程-PHP中文网

scrollbar-width 仅 firefox 支持，chrome/safari/edge 不识别；需配合 overflow 和可滚动条件才能生效，跨浏览器需组合 scrollbar-width、::-webkit-scrollbar 和 -ms-overflow-style。

如何在css中使用scrollbar-width隐藏滚动条

scrollbar-width 只在 Firefox 有效，其他浏览器不支持

scrollbar-width 是 Mozilla 专有属性，仅被 Firefox（64+）识别。Chrome、Safari、Edge 完全忽略它，即使写成 scrollbar-width: none 也不会生效。这不是兼容性问题，而是标准未采纳——CSS Scrollbars 模块（scrollbar-width 和 scrollbar-color）目前仍是 Working Draft，仅 Firefox 实现了前者。

Firefox 中隐藏滚动条的正确写法

在 Firefox 里用 scrollbar-width: none 确实能隐藏原生滚动条，但必须满足两个前提：

目标元素需有明确的 overflow 设置（如 overflow: auto 或 overflow: scroll），仅靠内容溢出不会触发
该元素必须可滚动（即内部内容高度/宽度超过容器），否则 scrollbar-width 无实际作用

示例：

.container {
  height: 200px;
  overflow: auto;
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
}

注意：这仅移除滚动条视觉，滚动功能仍存在（可用鼠标滚轮、键盘方向键或 scrollTop 操作）。

跨浏览器隐藏滚动条的通用方案

要真正“隐藏滚动条且保持滚动”，得组合多种技术：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

Firefox：用 scrollbar-width: none
WebKit 内核（Chrome/Safari）：用 ::-webkit-scrollbar { display: none }
IE/Edge Legacy：用 -ms-overflow-style: none
为防布局抖动，建议同时加 padding-right: 0 或用 overflow: overlay（仅旧版 WebKit 支持）

完整 CSS 片段：

.scrollable {
  overflow: auto;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge Legacy */
}
.scrollable::-webkit-scrollbar {
  display: none;                   /* Chrome/Safari */
}