隐藏滚动条但保留滚动功能需用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;
/ WebKit 隐藏滚动条 /
&::-webkit-scrollbar {
display: none;
}
/ Firefox 隐藏滚动条 /
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;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: transparent;
border: none;
}
}
@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 模拟隐藏（慎用）
极少数场景（如无法控制伪元素权限的嵌入环境），可用视觉遮盖法：
- 给容器设大内边距（如
padding-right: 17px），再用负外边距拉回（margin-right: -17px） - 外层再套一个
overflow: hidden的父容器裁剪掉滚动条区域 - 缺点明显：破坏盒模型、响应式易错乱、滚动范围可能异常，仅作兜底了解，不推荐常规使用
