CSS可通过overflow属性控制滚动条显隐：overflow:auto仅内容溢出时显示，overflow:scroll强制显示，overflow:hidden禁用滚动；视觉隐藏但保留滚动需用scrollbar-width:none（Firefox）和::-webkit-scrollbar{width:0}（WebKit）。
怎么用 CSS 控制 scrollbar 的显示和隐藏
滚动条不是靠 JS 控制显隐，而是通过 CSS 的 overflow 和 scrollbar-width/scrollbar-color（Firefox）或伪元素（WebKit）控制。关键在「什么时候该隐藏、什么时候还能滚动」——直接设 overflow: hidden 会连滚动能力一起干掉。
-
overflow: auto：内容超长才显示滚动条，最安全的默认选择 -
overflow: scroll：强制显示滚动条（即使没内容溢出），但可能留白或遮挡布局 -
overflow: hidden：彻底隐藏且禁用滚动，用户点不了也拖不动 - 想「视觉隐藏但保留滚动」？得用
scrollbar-width: none（Firefox）+ WebKit 伪元素覆盖（Chrome/Safari/Edge）
Chrome / Edge / Safari 下怎么自定义或隐藏原生滚动条
WebKit 内核浏览器只认 ::-webkit-scrollbar 系列伪元素，不支持标准属性。想让它“看不见但摸得着”，得把所有滚动条部件设成透明或零宽。
div.custom-scroll {
overflow-y: auto;
}
div.custom-scroll::-webkit-scrollbar {
width: 0;
}
div.custom-scroll::-webkit-scrollbar-track {
background: transparent;
}
div.custom-scroll::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 4px;
}
注意：width: 0 是最稳妥的隐藏方式；设 opacity: 0 或 visibility: hidden 不生效；display: none 会报错。
Firefox 下怎么隐藏滚动条
Firefox 从 64 版本起支持标准属性 scrollbar-width，比写一长串 WebKit 伪元素干净得多。
立即学习“前端免费学习笔记（深入）”；
-
scrollbar-width: none：完全隐藏（仍可滚） -
scrollbar-width: thin：显示窄版滚动条（仅 Firefox 支持） -
scrollbar-color: #888 #f0f0f0：自定义滑块和轨道颜色（需配合scrollbar-width: auto） - 必须和
overflow同时存在才生效，单独写无效
隐藏滚动条后用户真的能滚动吗
能，但容易踩两个坑：一是父容器没设 height 或 max-height，导致 overflow 失效；二是移动端 Safari 对隐藏滚动条支持不稳定，尤其在 position: fixed 容器里。
- 确保目标元素有明确高度约束，比如
max-height: 300px - 移动端建议加
-webkit-overflow-scrolling: touch（iOS 15.4 之前有效） - 别依赖鼠标悬停显示滚动条——触屏设备没 hover，而且用户不知道要滚
- 无障碍要考虑：隐藏后屏幕阅读器仍能正常读取可滚动区域，但视觉线索没了，必要时加文字提示（如“上拉查看更多”）
滚动条样式这件事，浏览器差异比想象中大，CSS 属性名、生效条件、甚至是否触发重排都不统一。写的时候最好先定死目标浏览器范围，再选方案。
