隐藏滚动条但保留滚动功能需用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 的父容器裁剪掉滚动条区域
• 缺点明显：破坏盒模型、响应式易错乱、滚动范围可能异常，仅作兜底了解，不推荐常规使用