CSS如何隐藏滚动条但保留功能_利用scrollbar-width属性隐藏-css教程-PHP中文网

firefox用scrollbar-width:none隐藏滚动条，仅限64+版本；chrome/safari用::-webkit-scrollbar设宽高为0并透明化；二者均需保留overflow:auto/scroll才能滚动。

css如何隐藏滚动条但保留功能_利用scrollbar-width属性隐藏

Firefox 里用 `scrollbar-width` 隐藏滚动条最简单

这个属性是 Firefox 专属，只在 scrollbar-width: none 或 scrollbar-width: thin 下生效，不影响滚动行为，也不需要 JS 干预。

常见错误是把它写在 body 或 html 上却没加 overflow: auto 类样式，导致根本没滚动条可隐藏；或者误以为它能在 Chrome/Safari 生效——它完全不支持。

scrollbar-width 必须作用于有滚动内容的容器（比如 div），且该容器需有明确的 height 和 overflow: auto 或 scroll
值为 none 时滚动条视觉消失，但鼠标滚轮、键盘方向键、触摸板拖拽全都能用
兼容性仅限 Firefox 64+，其他浏览器会直接忽略该声明，无副作用

div.scrollable {
  height: 200px;
  overflow: auto;
  scrollbar-width: none;
}

Chrome/Safari/Edge 用伪元素隐藏 `::-webkit-scrollbar`

这是 WebKit 内核（包括 Chromium 系）唯一可靠的方式，本质是把滚动条所有部件宽高设为 0，再透明化，不是禁用而是“不可见”。

容易踩的坑是只写了 ::-webkit-scrollbar 却漏掉 ::-webkit-scrollbar-thumb，结果滚动时仍能看到一个细长的灰色滑块；或者用了 display: none，反而导致滚动失效。

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

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

下载

必须同时设置 ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb 三者，否则部分浏览器会回退显示默认样式
推荐用 width: 0 + background: transparent 组合，比 opacity: 0 更稳妥（某些旧版 Safari 对 opacity 处理异常）
该方案对 textarea 和 iframe 内部滚动也有效，但不能跨域作用于 iframe 内容

div.scrollable::-webkit-scrollbar {
  width: 0;
  height: 0;
}
div.scrollable::-webkit-scrollbar-track {
  background: transparent;
}
div.scrollable::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}