应使用overflow-y: auto保留滚动功能，再通过::-webkit-scrollbar{width:0}、scrollbar-width:none和-ms-overflow-style:none跨浏览器隐藏滚动条；禁用overflow:hidden，因其会彻底禁用滚动能力。
隐藏滚动条但保持滚动功能
Bootstrap 本身不提供隐藏滚动条的工具类，这是 CSS 层面的控制。直接用 overflow: hidden 会禁用滚动，导致内容不可访问——这不是“隐藏”，是“废掉”。真正需求是：视觉上不显示滚动条，但鼠标滚轮、触控板、键盘方向键仍能正常滚动。
关键在覆盖浏览器默认滚动条样式，而不是删掉它：
- Chrome / Edge / Safari（WebKit）用
::-webkit-scrollbar伪元素设宽高为 0 - Firefox 用
scrollbar-width: none（仅支持 auto/ thin/ none） - IE/Edge Legacy 用
-ms-overflow-style: none
示例（作用于某个容器）：
.no-scrollbar {
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.no-scrollbar::-webkit-scrollbar {
width: 0;
height: 0;
}
为什么不能只加 overflow: hidden
这是最常踩的坑。加了 overflow: hidden 后，内容超出部分被裁剪，且完全无法滚动——用户按空格、PageDown、滚轮都没反应。尤其在模态框（modal）或侧边栏（offcanvas）里，容易误以为“只是没显示滚动条”，实际是功能已失效。
典型错误场景：
- 给
.modal-body直接加style="overflow: hidden"，结果长表单无法拉到底部提交 - 在
.dropdown-menu上设overflow: hidden，导致下拉项被截断且无法滚动查看
在 Bootstrap 5 组件中安全应用
Bootstrap 5 的 .modal、.offcanvas、.accordion-body 默认都依赖 overflow-y: auto 实现内部滚动。要在这些组件里隐藏滚动条，必须：
- 不破坏原有
overflow值（保留auto或scroll） - 单独加自定义类（如
no-scrollbar），只覆盖滚动条样式 - 避免用
!important覆盖 Bootstrap 的overflow规则
例如，给一个 .modal-body 隐藏滚动条：
<div class="modal-body no-scrollbar"> <p>很长的内容...</p> </div>
移动端兼容性要注意什么
iOS Safari 和 Android Chrome 对 ::-webkit-scrollbar 支持不稳定：iOS 完全不支持该伪元素，所以 width: 0 在 iPhone 上无效；Android 大部分版本支持，但某些定制系统（如华为 EMUI）可能忽略。
替代方案有限，但可缓解：
- 用
overscroll-behavior: contain防止滚动穿透（尤其在modal叠加时） - 对 iOS，接受它默认显示细滚动条——强行隐藏反而影响可访问性
- 不依赖滚动条视觉反馈时，确保有其他线索（如内容截断阴影、底部“查看更多”提示）
滚动条是否可见，本质是 UX 与可访问性的权衡。纯视觉隐藏在桌面端可行，在移动端要更谨慎。
