直接给出结论：若要实现 Bootstrap 模态框内容区域的局部滚动，核心方法只有一个——仅对 .modal-body 同时设置 max-height 和 overflow-y: auto，这两项属性缺一不可。在其他元素上添加滚动样式通常都无法生效。
从实际经验来看，只有对 .modal-body 同时应用 max-height 和 overflow-y: auto 才能生效。这一原则值得反复强调——因为在复杂的 CSS 布局与组件嵌套中，这往往是让模态框内容真正实现局部滚动的唯一可靠路径。
为什么直接给 .modal 或 .modal-content 加 overflow-y: auto 不起作用
这源于 Bootstrap 的布局机制。.modal-dialog 默认采用 display: flex，而 .modal-content 没有固定高度限制，导致整个模态框随内容不断撑开。核心问题在于：父级的弹性布局会破坏滚动上下文。浏览器不会主动触发子元素的滚动，除非滚动容器本身具有明确的高度边界和溢出声明。
.modal和.modal-content主要作为布局容器，而非实际的内容承载区域。直接添加overflow属性不仅无效，还会破坏垂直居中与响应式缩放效果。.modal-dialog-scrollable类虽然启用了滚动逻辑，内部确实会对.modal-body设置max-height: 60vh和overflow-y: auto，但该高度值在富文本、表单或小屏设备上往往捉襟见肘。- 如果父级元素（如
.modal-content）设置了height: 100%或flex: 1，则.modal-body无法正确继承有效高度，导致max-height失去作用。
.modal-body 滚动设置必须包含哪些 CSS 规则
必须同时满足以下三项，缺一不可：
max-height：避免使用height，否则在小屏设备上内容会被直接裁剪。推荐使用视口单位（如70vh）或固定值（如400px）。overflow-y: auto：使用scroll会强制始终显示滚动条，影响视觉体验；而auto仅在内容溢出时出现，更加优雅。-webkit-overflow-scrolling: touch：iOS Safari 必须添加此属性，否则滚动会变得卡顿，缺乏惯性。
示例写法：
移动端 Safari 滚不动或卡顿的典型原因
这并非 bug，而是 WebKit 渲染的固有限制：在 flex 容器中，滚动必须显式启用惯性滚动支持。
- 该属性仅对 WebKit 内核浏览器生效（Chrome、Safari、Edge），Firefox 不识别也无需此属性。
- 必须将属性添加到实际滚动的元素上——即
.modal-body，而非外层 wrapper 或.modal。 - 如果使用了
overlay-scrollbars或simplebar等第三方滚动库，它们会接管原生滚动行为，导致该属性失效。 - 请检查
.modal-body内部是否设置了display: flex; flex-direction: column但未给子容器设置flex: 1，这会造成高度塌陷，使max-height失去作用。
自定义滚动条样式为何没效果
原因是 ::-webkit-scrollbar 伪元素仅作用于实际发生滚动的元素，且只被 WebKit 内核支持。
- 必须将样式应用在
.modal-body上，例如：.modal-body::-webkit-scrollbar { width: 8px; }。 - Firefox 完全不支持该伪元素，也没有等效的标准 CSS 属性。若需跨浏览器统一滚动条样式，必须引入 JavaScript 滚动库（如
simplebar）。 - 不要为
.modal或.modal-content编写::-webkit-scrollbar——这些元素并未参与滚动。
滚动本身并不复杂，难点在于 flex 布局、响应式设计、移动端兼容性以及第三方组件共存的环境中，让 .modal-body 稳定地获得可预测的高度和滚动上下文。说到底，所有问题的解决方案几乎都围绕这个核心元素展开。
