隐藏滚动条但保留滚动功能需用overflow启用滚动，再通过::-webkit-scrollbar设display:none或width:0（WebKit），及scrollbar-width:none（firefox）实现，兼顾兼容性与无障碍。
隐藏滚动条但保留滚动功能，核心是让滚动条不可见，同时不干扰元素的可滚动行为。关键在于利用 overflow 控制滚动行为，再通过浏览器特有的伪元素或属性隐藏视觉上的滚动条。
基础方案：用 overflow 控制滚动，配合伪元素隐藏（主流浏览器）
这是最常用、兼容性较好的方式，适用于 chrome、edge、Firefox（部分版本）、safari（需注意版本）：
- 先确保容器有明确的尺寸和
overflow: auto或overflow: scroll，以启用滚动能力 - 对 WebKit 内核（Chrome / Edge / Safari）使用
::-webkit-scrollbar系列伪元素设为display: none或width: 0 - Firefox 使用
scrollbar-width: none（仅支持auto、thin、none），并搭配scrollbar-color: transparent transparent进一步隐藏
示例代码：
.scroll-container { width: 300px; height: 200px; overflow: auto; <p>/<em> WebKit 隐藏滚动条 </em>/ &::-webkit-scrollbar { display: none; }</p><p>/<em> Firefox 隐藏滚动条 </em>/ scrollbar-width: none; scrollbar-color: transparent transparent; }更稳妥的兼容写法（兼顾旧版 Safari 和移动端）
某些旧版 Safari（如 ios 15 之前）不支持 ::-webkit-scrollbar 的 display: none，此时可用宽度归零 + 透明色替代：
立即学习“前端免费学习笔记（深入）”；
- 将
::-webkit-scrollbar宽度/高度设为0，同时设置背景/轨道/-thumb 为透明 - 避免在移动端误触触发“弹性滚动”导致滚动条短暂闪现，可加
-webkit-overflow-scrolling: touch（iOS Safari 优化） - 注意：Safari 16.4+ 已支持
display: none，但低版本仍建议降级处理
增强版示例：
.scroll-container { overflow: auto; -webkit-overflow-scrolling: touch; <p>&::-webkit-scrollbar { width: 0; height: 0; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: transparent; border: none; } }</p><p>@supports (scrollbar-width: none) { .scroll-container { scrollbar-width: none; scrollbar-color: transparent transparent; } }注意事项与常见陷阱
看似简单，实际容易踩坑：
- 不要只写
overflow: hidden——这会直接禁用滚动，不是“隐藏”，而是“取消” - 伪元素必须作用于可滚动容器本身，不能写在父级或子级上；且需确保该容器确实触发了滚动（内容溢出）
- Firefox 的
scrollbar-width: none只在overflow: auto或scroll下生效，overflow: overlay（已废弃）不适用 - 无障碍访问不受影响：键盘（方向键、PageUp/PageDown）、触控板滚动、辅助技术仍可正常操作，因为滚动功能本身未被禁用
替代思路：用 padding + 负 margin 模拟隐藏（慎用）
极少数场景（如无法控制伪元素权限的嵌入环境），可用视觉遮盖法：