必须配合max-height才生效，仅.overflow-y-auto无效；.border和.shadow-sm等类可直接使用，但阴影会随滚动移动，需外层包裹或伪元素固定。
用 .overflow-y-auto + .border + .shadow 组合就能实现，但必须限制高度
Bootstrap 5 默认不给容器设固定高，而垂直滚动只在内容超限时触发——所以光加 overflow-y-auto 没用。必须配合 max-height 或 height 才生效。
推荐用 max-height，更灵活：内容少时不撑满，多时才滚动。边框和阴影直接用内置类：.border（细实线）、.border-1（可选粗细），.shadow-sm / .shadow 控制阴影强度。
- 别用
height: 300px这种硬编码，改用style="max-height: 300px;"或自定义 CSS 变量适配不同断点 - 移动端小屏下建议降低
max-height，比如用max-height: 200px配合@media (max-width: 576px) -
.overflow-y-auto在 Safari 旧版有兼容问题，若需支持 iOS 12 以下，得加-webkit-overflow-scrolling: touch
响应式高度要靠媒体查询或 vh 单位，不能只靠 Bootstrap 工具类
Bootstrap 的 .h-25、.h-50 等高度工具类是固定比例，不随视口变化“缩放”，也不适配内容区域的实际可用空间。真正响应式得手动介入。
常见做法是用 max-height: 60vh（占视口高的 60%），再结合断点微调：
<div class="border shadow-sm overflow-y-auto" style="max-height: 60vh;"> <p>长内容...</p> <p>长内容...</p> </div>
-
vh在 iOS Safari 横屏时可能误算（把地址栏高度也算进视口），稳妥起见可在横屏时降为50vh - 如果父容器用了
flex布局（如.d-flex.flex-column），优先用flex-grow-1+min-height: 0触发 flex 容器内滚动，比max-height更健壮 - 避免嵌套多个
overflow容器，否则滚动行为可能冲突，尤其在模态框（.modal-body）里再套一层时
.shadow 在滚动容器里会随内容移动，想固定阴影得用伪元素或外层包裹
直接给滚动容器加 .shadow，阴影会随内容一起滚动——这不是 bug，是 CSS 正常行为。如果设计要求阴影始终“贴底”或“悬浮在内容上方”，就得绕开。
两种轻量方案：
- 外层包一个无滚动的
<div class="border shadow-sm">，内层再套<div class="overflow-y-auto" style="max-height: 300px;">——阴影不动，滚动只发生在内层 - 用
::after伪元素模拟固定阴影：给容器加position: relative，再用绝对定位 +box-shadow模拟底部渐隐效果（适合需要“内容被遮挡”视觉感的场景） - 慎用
filter: drop-shadow()，它不会随滚动裁剪，容易溢出容器边界，且性能略差
移动端触摸滚动卡顿？加 .scroll-smooth 并检查父级 transform
iOS 和部分安卓 WebView 中，纯 overflow-y-auto 容器滚动可能生涩。Bootstrap 5.3+ 提供了 .scroll-smooth 工具类（本质是 scroll-behavior: smooth），但它只影响锚点跳转，不解决惯性滚动卡顿。
真正起效的是这三点：
- 确保滚动容器或其任意父级没设
transform（比如.translate-y-1）、will-change或backface-visibility，这些会破坏原生滚动优化 - 加
style="-webkit-overflow-scrolling: touch;"（仅 iOS WebKit，已逐步弃用但仍有实效） - 若内容含大量图片或未优化 DOM，滚动前先用
contain: layout style paint隔离渲染影响（需 CSS 支持）
边框阴影本身不影响滚动性能，但叠加过多 box-shadow 层或模糊值过大（如 shadow-lg）会在低端机上引发重绘延迟。
