模态框需手动设置.modal-body的max-height和overflow-y: auto，并加-webkit-overflow-scrolling: touch解决iOS滚动卡顿；复用时须清空表单值并重置textarea高度。
模态框高度不会自动随内容撑开，也不会自动限制滚动——它默认是“内容多高就多高”，但超出视口后会把整个页面拖出滚动条，这不是你想要的。
为什么 modal-body 不滚动、body 却滚了
根本原因是 .modal-body 没设 max-height，而它的父级 .modal-content 在 Bootstrap 5 中默认是 display: block（不是 flex），导致内部高度完全由内容决定；一旦内容超长，.modal 就会突破视口，浏览器只能让 <body> 出现滚动条。
- 别只加
overflow-y: auto——没max-height的话，它永远不触发滚动 - 不要给
.modal-dialog或.modal-content设height或max-height，否则会破坏垂直居中和响应式断点 - Bootstrap 4 和 5 行为一致：都不预设
.modal-body高度，必须手动加 - 推荐用
max-height: calc(100vh - 180px)（减去 header + footer + padding 的估算值），比固定像素更健壮
移动端 Safari 滚动卡顿或没惯性
在 iOS Safari 上，即使加了 max-height 和 overflow-y: auto，.modal-body 滚动仍可能生硬、无法滑过界、松手即停——这是 WebKit 的经典限制。
- 必须加
-webkit-overflow-scrolling: touch才能启用原生滚动惯性 - 该属性只对已启用
overflow的元素生效，且不能写在父级上（比如.modal-content） - 如果用了第三方组件（如富文本编辑器），它们可能重置或覆盖这个样式，建议在 modal show 后用 JS 强制补上：
modalBody.style.webkitOverflowScrolling = 'touch' - 注意：此属性在较新 Safari 中已被标记为“deprecated”，但目前仍是解决卡顿最可靠的方式
用 scrollable 属性？别全信默认值
Bootstrap 5.2+ 提供了 scrollable 属性（即 data-bs-scrollable 或直接写 class modal-scrollable），但它只是快捷方式，底层仍是给 .modal-body 加 max-height: 60vh 和 overflow-y: auto。
- 60vh 在小屏手机上可能太小（比如 iPhone SE），内容刚展开就截断
- 它不加
-webkit-overflow-scrolling: touch，移动端仍卡 - 如果你用了自定义 header/footer，实际可用高度 ≠ 60vh，得自己重写
max-height - 更稳妥的做法是不用
scrollable，直接在 HTML 里写：<div class="modal-body" style="max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;">
隐藏域/表单残留值干扰高度计算
当模态框复用（比如表格每行一个“编辑”按钮），.modal-body 内的 <textarea> 或 <select> 如果上次没清空，JS 动态调整高度时可能按旧内容算，导致展开后留白或突然跳动。
- 在
show.bs.modal回调开头，先重置所有表单控件：$modal.find('input, textarea, select').val('') - 对
<textarea>要额外处理：设style.height = 'auto'再触发一次input事件，让它重新量scrollHeight - 避免在
.modal-body里放position: absolute元素——它们脱离文档流，会让scrollHeight计算失准 - 如果用了自适应
<textarea>，确保其父容器没设overflow: hidden，否则滚动条会被裁掉
真正麻烦的不是加滚动，而是滚动后焦点管理、z-index 层级、移动端触摸行为、以及复用场景下的 DOM 状态污染——这些点不提前压住，上线后问题会藏得很深。
