Bootstrap下拉菜单超出视口默认不滚动，需手动设置.dropdown-menu { max-height: 300px; overflow-y: auto; }并确保父级无overflow: hidden，同时针对移动端添加-webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;。
下拉菜单超出视口时默认不滚动怎么办
Bootstrap 的 .dropdown-menu 默认是「静态高度」，内容一多就直接溢出屏幕底部，用户根本点不到下面的选项。这不是 Bug，是设计如此——它依赖你主动控制高度和滚动行为。
给 .dropdown-menu 加固定高度和滚动样式
最直接的办法是用 CSS 限制最大高度并启用垂直滚动。注意必须同时设置 overflow-y: auto 和 max-height，否则滚动条不会出现。
常见错误：只加 height 不加 max-height，或者忘了设 overflow-y，结果菜单被截断但无法滚动。
推荐写法（兼容 Bootstrap 5）：
.dropdown-menu {
max-height: 300px;
overflow-y: auto;
}
如果需要更精细控制（比如避开滚动条遮挡文字），可额外加：
-
scrollbar-width: thin（Firefox） -
::-webkit-scrollbar自定义（Chrome/Safari） - 确保父级
.dropdown没有overflow: hidden，否则会裁掉滚动区域
下拉方向自动翻转时滚动失效怎么处理
当菜单靠近页面底部，Bootstrap 会自动将 .dropdown-menu 上翻（添加 .dropup 类），但此时 max-height 仍从顶部算起，容易导致顶部内容被截断。
解决思路不是禁用翻转，而是让滚动区域始终“贴着可视区”：
- 用
@media (max-height: 768px)等条件降低max-height值 - 监听
show.bs.dropdown事件，动态计算可用空间并设置style.maxHeight - 更稳妥的做法：统一用
position: absolute+top: 100%或bottom: 100%，再配合 JS 计算高度
移动端触摸滚动卡顿或失效
在 iOS Safari 和部分安卓浏览器里，overflow-y: auto 默认不支持原生滚动惯性，滑动生硬甚至点不动。
关键补丁只有两行：
.dropdown-menu {
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
别漏掉 overscroll-behavior-y，否则滚动到底时会触发整个页面回弹（尤其是嵌套在 modal 里的下拉菜单）。
另外确认：该菜单没被包裹在 transform 容器里（比如 scale(0.99)），否则 iOS 会禁用滚动优化。
滚动逻辑本身不复杂，难的是各种边界场景——菜单在 modal 里、在 fixed 导航下、在缩放页面中，每个都要单独验证高度计算和滚动响应是否正常。
