在bootstrap 5中，可以通过自定义css覆盖默认的滚动行为来隐藏垂直滚动条但保留滚动功能。具体做法是为需要滚动的容器设置 overflow-y: scroll 并配合 scrollbar-width: none（firefox）以及使用伪元素或特定选择器隐藏webkit内核的滚动条。这样做可以在保持内容可滚动的前提下，消除视觉上的滚动条干扰。
如何针对Webkit浏览器隐藏滚动条
对于Chrome、Safari和Edge等基于Webkit或Blink内核的浏览器，可以使用 ::-webkit-scrollbar 伪元素来隐藏滚动条。将 display: none 应用于该伪元素即可实现目标。
.custom-scroll {
overflow-y: auto;
}
.custom-scroll::-webkit-scrollbar {
display: none;
}
上述代码定义了一个名为 .custom-scroll 的类。应用此类后，容器会在内容超出时自动出现滚动条（视觉上被隐藏），用户仍可通过鼠标滚轮或触摸板进行滚动操作。
如何兼容Firefox浏览器
Firefox不支持 ::-webkit-scrollbar，但支持CSS属性 scrollbar-width。将其设置为 none 可以隐藏滚动条，同时保留滚动功能。
.custom-scroll {
overflow-y: auto;
scrollbar-width: none; /* Firefox */
}
/* 可选：为旧版Firefox提供额外支持 */
@-moz-document url-prefix() {
.custom-scroll {
scrollbar-width: none;
}
}
结合Webkit和Firefox的样式，可以实现跨浏览器的无滚动条滚动效果。确保 overflow-y 设置为 auto 或 scroll，以便在内容溢出时启用滚动机制。
如何在Bootstrap组件中应用此样式
在Bootstrap 5中，可以将上述CSS类直接应用到任何需要滚动的组件，例如 .card-body、.modal-body 或自定义容器。只需添加 class="custom-scroll" 即可生效。
<div class="card custom-scroll" style="height: 300px;">
<div class="card-body">
<p>长内容...</p>
</div>
</div>
通过这种方式，可以在不破坏Bootstrap原有布局和功能的前提下，实现隐藏滚动条的需求。注意，如果容器高度未固定，可能需要显式设置 height 或 max-height 以确保滚动行为符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
