应使用overflow: auto或scroll启用滚动，再配合::-webkit-scrollbar{width:0}、scrollbar-width:none、-ms-overflow-style:none等跨浏览器规则隐藏滚动条；overflow:hidden会彻底禁用滚动功能。
隐藏滚动条但保持内容可滚动的CSS方案
Bootstrap 5本身不提供隐藏滚动条的工具类，必须手写CSS。核心思路是让滚动条不可见但不禁止滚动行为——不能用 overflow: hidden，否则内容无法滚动；也不能依赖 scrollbar-width: none（Firefox专属且兼容性差）。
跨浏览器稳定生效的方法是覆盖滚动条伪元素样式：
- Chrome / Edge / Safari：用
::-webkit-scrollbar系列伪类将宽度设为0 - Firefox：用
scrollbar-width: none（仅支持auto、thin、none） - IE10+：用
-ms-overflow-style: none
示例（作用于某个容器）：
.no-scrollbar {
/* WebKit */
&::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Firefox */
scrollbar-width: none;
/* IE10+ */
-ms-overflow-style: none;
}
为什么直接加 overflow-x: hidden 不行
这是最常踩的坑：开发者看到水平滚动条，第一反应是加 overflow-x: hidden，结果整个横向滚动功能被禁用，用户无法拖动或用滚轮查看溢出内容。
真正需要的是保留 overflow-x: auto 或 overflow-x: scroll，仅隐藏视觉滚动条。常见误用场景包括：
- 在
<div class="row"> 外层加 <code>overflow-x: hidden，导致响应式栅格在小屏下截断 - 对
.table-responsive容器错误覆盖overflow，使表格无法横向滑动 - 用
text-overflow: ellipsis试图“隐藏”滚动条（完全无效） -
.table-responsive：默认有overflow-x: auto，可直接在其上加no-scrollbar类，无需重写overflow -
.modal-body：若内容超长，垂直滚动条默认可见；隐藏时需同时处理::-webkit-scrollbar和scrollbar-width，否则Firefox仍显示 - 自定义
.carousel或.offcanvas：确保父容器未设置overflow: hidden，否则隐藏滚动条后内容被裁剪 - 用
overflow: scroll替代auto，触发硬件加速 - 加
-webkit-overflow-scrolling: touch（虽然已废弃，但在旧版iOS仍有效） - 配合
overscroll-behavior-x: contain防止滚动穿透
在Bootstrap 5组件中安全应用的注意事项
某些Bootstrap 5组件内部已定义 overflow 行为，盲目加隐藏滚动条样式可能冲突：
建议始终用独立类名（如 no-scrollbar）封装滚动条样式，避免污染Bootstrap原生类。
移动端Safari的特殊处理
iOS Safari（尤其是15+）对 ::-webkit-scrollbar 支持不稳定，有时即使设了 width: 0 仍会短暂闪现滚动条。更稳妥的做法是：
完整移动端适配片段：
.no-scrollbar {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
&::-webkit-scrollbar { width: 0; }
scrollbar-width: none;
-ms-overflow-style: none;
}
滚动条是否真正“消失”，得在真机上验证——模拟器经常不准确。
