移动端下拉菜单展开时页面仍可滚动，需手动锁定 body 滚动并禁用自动聚焦：监听 show.bs.collapse 事件设置 overflow: hidden，缓存原始值后还原；为下拉项加 tabindex="-1" 防跳顶；给 nav 添加 backface-visibility: hidden 和 translateZ(0) 解决 iOS 渲染错乱。
移动端下拉菜单展开时页面仍可滚动？
这不是 Bootstrap 的默认行为，而是你没阻止 navbar-collapse 展开后，body 仍保持可滚动状态。尤其在 iOS Safari 中，键盘弹出或快速滑动会触发 body 滚动，导致菜单被顶出视口、内容错位。
- 别依赖
fixed-top自带的滚动控制——它只管定位，不管折叠态下的 body 行为 - 给
<div class="navbar-collapse">添加style="position: relative"，否则下拉菜单用position: absolute时会以 viewport 为锚点，容易被截断 - 在展开时手动锁 body：
document.body.style.overflow = 'hidden'；收起时恢复：document.body.style.overflow = '' - 避免用
overflow: hidden !important全局覆盖——它会干扰模态框、Tooltip 等其他组件的滚动逻辑
为什么加了 data-bs-toggle="collapse" 还拦不住滚动？
因为 Bootstrap 的 collapse 插件本身不干预 body 滚动，它只控制元素显隐。你看到的“页面没动”，其实是巧合：当 collapse 区域高度小、无焦点切换、且 viewport 高度足够时，滚动不易触发。但一旦有输入框、软键盘、或长列表，问题立刻暴露。
- 监听
show.bs.collapse和hide.bs.collapse事件，而不是靠 class 变化去判断 - 在
show.bs.collapse回调里加event.target.closest('.navbar-collapse')判断是否属于当前导航栏，避免误锁 - 别在事件回调里直接操作
body.style.overflow——先用getComputedStyle(document.body).overflow缓存原始值，关闭时还原，防止多次 toggle 后留脏状态
移动端点击下拉项后页面跳到顶部？
这是焦点自动跳转惹的祸。Bootstrap 默认会在 collapse 展开后尝试聚焦第一个可交互子元素（比如 <a> 或 <button>），而如果该元素不在视口内，浏览器就会强制滚动到它。
- 给下拉菜单里的链接加
tabindex="-1"，让它不可聚焦，但保留语义和键盘导航能力 - 在
show.bs.collapse事件中调用event.preventDefault()，再手动focus()到你真正想聚焦的元素（比如搜索框） - 如果整个下拉菜单只是导航用途，直接在
<ul class="dropdown-menu">上加data-bs-popper="none"并禁用 Popper，减少定位干扰
iOS Safari 下拉菜单闪一下就消失？
根本不是 JS 执行快慢的问题，是 WebKit 对 position: fixed + transform + 快速 touchmove 的渲染竞争导致的层叠错乱。尤其当你用了自定义动画、或外层 wrapper 带了 transform: translateZ(0) 时，fixed 元素会突然“失锚”。
- 给
<nav class="navbar">加style="backface-visibility: hidden; transform: translateZ(0)"，强制启用硬件加速 - 检查所有父级容器（包括
<body>、<div class="container-fluid">）是否意外加了transform、perspective或filter——哪怕值是none，也会创建新层叠上下文，让fixed定位基准失效 - 确保
<head>里有完整 viewport：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
