隐藏滚动条但保持滚动功能需用CSS伪元素或属性分别适配浏览器：Chrome/Safari用::-webkit-scrollbar{display:none}，Firefox及新版Safari用scrollbar-width:none，同时确保容器有高度和overflow:auto/scroll。
Chrome/Firefox/Safari 中隐藏滚动条但保持滚动功能
直接隐藏滚动条却不影响内容滚动，核心是用 CSS 掩盖滚动条视觉部分，而非禁用 overflow。主流浏览器（Chrome、Firefox、Safari）都支持伪元素或属性控制，但写法不同，需分别处理。
-
::-webkit-scrollbar仅在基于 WebKit/Blink 的浏览器（Chrome、Edge、Safari）生效，必须配合display: none或width: 0才能真正“不可见” - Firefox 使用
scrollbar-width: none（仅 Firefox 64+），scrollbar-color可配色但不能隐藏，所以none是关键 - Safari 16.4+ 开始支持
scrollbar-width: none，但旧版 Safari 仍需依赖::-webkit-scrollbar - 不要设
overflow: hidden—— 这会彻底禁用滚动，不是“隐藏滚动条”
html {
scrollbar-width: none; /* Firefox + 新版 Safari */
}
html::-webkit-scrollbar {
display: none; /* Chrome/Edge/Safari（旧版） */
}
/* 若只想隐藏垂直滚动条，保留水平方向，可用： */
body {
overflow-y: scroll;
overflow-x: hidden;
}
body::-webkit-scrollbar {
width: 0;
}
body {
scrollbar-width: none;
}只隐藏特定容器的滚动条（如 div.scrollable）
全局隐藏容易误伤 、 等原生控件，更稳妥的做法是只作用于自定义滚动容器。此时必须确保该容器有明确的 height 或 max-height 和 overflow: auto 或 scroll，否则伪元素不触发。
-
div.scrollable必须有固定高度约束，否则内容撑开容器，无需滚动，滚动条自然不出现 -
overflow: overlay在旧版 WebKit 中可让滚动条浮在内容上，但现代已废弃，不用依赖 - 移动端 Safari 对
::-webkit-scrollbar支持不稳定，隐藏后可能仍偶现短暂滚动条，属系统级行为，无法完全消除
div.scrollable {
height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
div.scrollable::-webkit-scrollbar {
width: 0;
height: 0;
}
div.scrollable {
scrollbar-width: none;
}隐藏后滚动失效？检查这三点
常见“隐藏滚动条后滚不动”问题，基本不是 CSS 写错，而是布局或交互被意外阻断。
- 父容器设置了
pointer-events: none或某层z-index遮挡了滚动区域 - 容器内存在
position: fixed或absolute元素覆盖了滚动热区（尤其顶部/底部吸底栏） - 使用了
touch-action: none（常见于轮播图或手势库），它会禁用原生滚动，需改为touch-action: pan-y或移除
兼容性与可访问性提醒
隐藏滚动条本身不影响键盘 Tab、Space、方向键滚动，也不影响屏幕阅读器识别可滚动区域 —— 前提是语义正确（例如用 role="region" + aria-label 标注用途）。但要注意：
立即学习“前端免费学习笔记（深入）”；
- 纯靠视觉判断是否可滚动的用户（比如新访客）会失去线索，建议加轻微阴影、渐变遮罩或 hover 提示
- Windows 高对比模式下，某些隐藏方式可能失效，
scrollbar-width: none比伪元素更稳定 - IE 完全不支持上述任一方案，若还需兼容 IE，只能接受显示滚动条或用 JS 模拟滚动（不推荐）
滚动条是否可见，和能否滚动是两件事；CSS 隐藏的是“样式”，不是“能力”。最容易忽略的是：容器没设高度、父层拦截事件、或移动端 touch-action 错误设置——这些比写错伪元素更容易导致“看不见也滚不了”。
