通过css自定义bootstrap 5的垂直滚动条样式，核心方法是使用 ::-webkit-scrollbar 系列伪元素覆盖默认样式。由于bootstrap本身不强制定义滚动条外观，你只需在自定义css中针对 body 或特定容器设置这些属性即可生效。
如何修改全局页面的滚动条外观
要改变整个网页的垂直滚动条，直接对 html 和 body 应用 ::-webkit-scrollbar 样式。这适用于大多数基于Bootstrap的项目，因为页面内容通常包裹在 body 中。你可以调整宽度、轨道颜色和滑块颜色。
/* 自定义全局滚动条 */
html {
scrollbar-width: thin; /* Firefox */
scrollbar-color: #888 #f1f1f1;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}上述代码将滚动条宽度设为10像素，轨道为浅灰色，滑块为深灰色且圆角化。鼠标悬停时滑块变暗。此方案同时兼容WebKit内核浏览器（Chrome, Safari）和Firefox（通过 scrollbar-width 和 scrollbar-color）。
立即学习“前端免费学习笔记（深入）”；
如何仅修改特定容器（如模态框）的滚动条
当需要限制某个区域（例如 .modal-body 或 .card-body）的滚动行为并自定义其滚动条时，需将该选择器替换为具体的类名。这能避免影响页面其他部分的滚动体验。关键在于确保容器设置了 overflow-y: auto 以启用滚动。
/* 仅针对模态框内容区 */
.modal-body {
max-height: 400px;
overflow-y: auto;
}
.modal-body::-webkit-scrollbar {
width: 6px;
}
.modal-body::-webkit-scrollbar-track {
background: transparent;
}
.modal-body::-webkit-scrollbar-thumb {
background: #0d6efd; /* Bootstrap primary color */
border-radius: 3px;
}这段代码将模态框内部滚动条宽度减至6像素，轨道透明，滑块使用Bootstrap的主色调蓝色。这种局部定制不会影响主页面滚动条，适合精细化UI控制。
如果容器高度不足会触发什么滚动行为
当容器内容超出设定高度时，若未显式设置 overflow，浏览器默认会显示滚动条。但在Bootstrap组件中，如 .modal 或 .offcanvas，框架已内置 overflow: hidden 在外层，而内层内容区（如 .modal-body）通常设 overflow-y: auto。因此，只有当内容溢出内层容器时，自定义的滚动条才会出现。若未设置 max-height 或 height，则不会触发垂直滚动，自定义样式也不会生效。
