加了 modal-dialog-scrollable 还不滚动，是因为该类仅启用滚动逻辑，但未提供可滚动的高度边界；需确保 .modal-body 有明确 max-height（如 60vh）和 overflow-y: auto，且父容器未用 height: 100% 或 flex: 1 破坏高度继承。
为什么加了 modal-dialog-scrollable 还不滚动？
不是 class 没生效，而是它只负责“启用滚动逻辑”，不负责“提供可滚动的高度边界”。modal-dialog-scrollable 在 Bootstrap 5.2+ 中会自动给 .modal-body 加 max-height: 60vh 和 overflow-y: auto，但这个高度计算极易被破坏：
- 父级
.modal-content或.modal-dialog被设了height: 100%或flex: 1，导致子元素无法继承有效高度 - 你在
.modal-body里用了display: flex; flex-direction: column却没给子容器设flex: 1，高度塌陷 - 嵌套了
position: absolute元素，脱离文档流，干扰 height 计算 - 在移动端 Safari 上，缺
-webkit-overflow-scrolling: touch会导致滚动卡顿或失效
modal-dialog-scrollable 和手动设 max-height 冲突吗？
不冲突，但优先级要理清。Bootstrap 的 modal-dialog-scrollable 是 CSS 驱动的，它内部用的是 max-height: calc(100vh - 1rem)，这个值在小屏幕（比如 iPhone 竖屏）下可能不够，内容仍会溢出。
- 建议显式覆盖：给
.modal-body加style="max-height: 70vh; overflow-y: auto;"，比依赖默认更可控 - 若用 SCSS 自定义主题，别直接改
.modal-dialog-scrollable的max-height，而是在.modal-body上加@include media-breakpoint-down(md) { max-height: 60vh; } - 绝对不要给
.modal-dialog或.modal-content设height——会破坏垂直居中和响应式缩放
滚动后点不到 backdrop 关闭模态框？
这是 z-index 错乱的典型副作用，不是滚动本身的问题。当 .modal-body 内部某个元素（比如富文本编辑器、下拉菜单、autofocus 输入框）获得焦点，JS 可能临时提升它的 z-index，盖住 .modal-backdrop（默认 z-index: 1040）。
- 检查是否对
.modal-body或其子元素写了position: relative+z-index，删掉 - 确保所有第三方组件初始化后没偷偷改
z-index，尤其注意vue-select、quill、flatpickr类库 - 在
shown.bs.modal事件里做兜底：$('#myModal').on('shown.bs.modal', () => { $('.modal-body *').css('z-index', 'auto'); });
自定义滚动条样式怎么加才安全？
只能作用于 .modal-body，且仅限 WebKit 内核（Chrome/Safari/Edge）。Firefox 不支持 ::-webkit-scrollbar，别指望跨浏览器统一外观。
- 必须写成：
.modal-body::-webkit-scrollbar { width: 8px; }，width控制垂直滚动条粗细 - 别给
.modal-dialog或.modal-content加，它们不是滚动容器 - 移动端加
-webkit-overflow-scrolling: touch时，要和滚动条样式分开写，避免被覆盖 - 如果用了 Shadow DOM（如 Web Components 封装的模态框），
::-webkit-scrollbar不会穿透，得在宿主内单独定义
滚动真正生效的关键不在“加什么 class”，而在“谁来承担高度约束”——.modal-body 必须是那个明确知道自己最多能占多高的容器，其他层级都得让它安静撑开。
