只有给 .modal-body 设置 max-height 和 overflow-y: auto 才能实现有效滚动，因 .modal-dialog 的 flex 布局截断滚动行为；需配合 -webkit-overflow-scrolling: touch 修复 iOS Safari 卡顿，并针对 .modal-body 自定义滚动条样式。

只改 .modal-body 才有效

bootstrap 的 .modal-dialog 默认是 display: flex，.modal-content 没设高度限制，整个模态框会随内容撑开——滚动行为被父级弹性布局“截断”，你给 .modal 或 .modal-content 加 overflow-y: auto，浏览器根本不会触发滚动。只有 .modal-body 是语义上唯一该承载长内容的区域，且 bootstrap 5 官方文档明确推荐在此处控制滚动。

必须显式设置：

• .modal-body 上加 max-height（别用 height，小屏会被裁）
• 同时配 overflow-y: auto（scroll 会强制显示滚动条，干扰体验）
• 确保 .modal-header 和 .modal-footer 不在 .modal-body 内，否则也会被卷进去

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，高度塌陷
• 移动端 Safari 缺 -webkit-overflow-scrolling: touch，滚动卡顿或失效

建议显式覆盖：

移动端 Safari 滚不动？加这行就对了

iOS Safari 对 flex 容器内的滚动支持弱，即使 .modal-body 高度超限、overflow-y: auto 也设了，滚动仍卡顿或无惯性。这不是 bug，是 WebKit 渲染限制。

必须补一句：

.modal-body {
  -webkit-overflow-scrolling: touch;
}

注意点：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 这行只对 WebKit 内核生效（Chrome/Safari/Edge），Firefox 不需要也不识别
• 必须加在真正发生滚动的元素上，也就是 .modal-body，不是 .modal 或外层 wrapper
• 如果用了 overlay-scrollbars 等第三方滚动库，它会接管原生滚动，这行就无效了

自定义滚动条样式只对 .modal-body 生效

很多人写了 ::-webkit-scrollbar 却没效果，是因为选错了目标：不是 .modal 或 .modal-content，而是 .modal-body 本身，且它得真正发生溢出。

最小必要规则集（直接加到 CSS 文件里）：

.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

Firefox 不识别这些伪元素，目前唯一合法方式是用 JS 模拟滚动容器（如 simplebar），但这会增加复杂度和潜在冲突。

滚动后 backdrop 点不了？那大概率不是滚动本身的问题，而是 .modal-body 里某个子组件（比如富文本编辑器、下拉菜单）动态提升了 z-index，盖住了 .modal-backdrop。这种层级错乱比滚动设置本身更难排查，且容易被忽略。