现代浏览器可通过::-webkit-scrollbar设宽高为0并配合:hover恢复显示实现滚动条悬停显隐，firefox需用scrollbar-width: thin，safari建议将:hover绑定容器，移动端不支持该方案。
滚动条默认隐藏但悬停显示的 CSS 方案
现代浏览器（Chrome、Edge、Firefox 104+、Safari 16.4+）支持通过 ::-webkit-scrollbar 配合 :hover 控制滚动条显隐，但必须注意：纯 CSS 无法让滚动条“完全消失后只在 hover 时出现”，因为滚动条的渲染逻辑和元素尺寸绑定。真正可行的是「默认透明不可见 + hover 时恢复可见」，而非彻底移除布局占位。
-
overflow: auto必须保留，否则内容溢出时无法滚动，hover 也就无意义 - 使用
::-webkit-scrollbar系列伪元素设置宽度为0或透明色，再在父容器:hover下重置为可见样式 - Firefox 不支持
::-webkit-scrollbar，需用scrollbar-width: thin | none单独控制；scrollbar-width: none会彻底禁用滚动条（不推荐），thin是唯一可 hover 激活的折中选项 - Safari 对
:hover作用于滚动条伪元素的支持不稳定，建议将:hover绑定在滚动容器本身（如div.scroll-container:hover ::-webkit-scrollbar）
Chrome/Edge 中稳定生效的写法
以下代码让 .scrollable 容器的滚动条默认“视觉上消失”，鼠标进入容器区域时立即显示：
.scrollable {
overflow: auto;
scrollbar-width: thin; /* Firefox：始终保持细滚动条（不能设为 none）*/
scrollbar-color: #666 #f0f0f0; /* Firefox：滑块+轨道色 */
}
<p>.scrollable::-webkit-scrollbar {
width: 0;
height: 0;
}</p><p>.scrollable:hover::-webkit-scrollbar {
width: 8px;
height: 8px;
}</p><p>.scrollable:hover::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 4px;
}</p><p>.scrollable:hover::-webkit-scrollbar-thumb {
background: #666;
border-radius: 4px;
}</p><p>/<em> 可选：防止 hover 时因滚动条出现导致内容重排 </em>/
.scrollable {
padding-right: 8px; /<em> 预留滚动条宽度，避免抖动 </em>/
margin-right: -8px;
}
</p>
为什么不能用 display: none 或 visibility: hidden？
这两个属性对 ::-webkit-scrollbar 无效——浏览器根本不允许隐藏滚动条伪元素。尝试后你会发现样式被忽略，滚动条依然常驻。更关键的是：display: none 会破坏滚动机制，导致 overflow 失效，内容无法滚动。
- 滚动条不是普通 DOM 元素，它由浏览器原生渲染，CSS 控制粒度有限
-
width: 0是最接近“隐藏”的合法方式，但会保留微小占位（通常不可见） - 若需彻底无感，只能接受 Firefox 下始终显示细滚动条（
scrollbar-width: thin），这是当前跨浏览器兼容的底线
移动端与触屏设备的现实约束
这个方案在桌面端有效，但在 iOS Safari 和 Android Chrome 中基本失效——触屏设备没有 :hover 状态，且系统滚动条行为由 OS 控制，网页 CSS 几乎无法干预。如果你的应用需覆盖移动端，不要依赖此效果；改用 JS 监听 touchstart + scroll 动态加 class 是唯一出路，但体验割裂，且 iOS 仍可能强制显示原生滚动条。
真正容易被忽略的一点：滚动条宽度变化会触发重排，哪怕只差 1px。如果容器高度固定且内容刚好撑满，hover 显示滚动条可能导致底部内容被遮挡或跳动。务必测试真实数据量下的布局稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
