遮罩层不跟随滚动的问题，看似简单却让不少开发者踩坑。核心解决方案可以概括为：将遮罩层直接挂载到 下，使用 position: fixed 固定定位，并设置合适的 z-index（例如 1040），同时避免父容器因 overflow: hidden 或 transform 属性引发层叠上下文陷阱。此外，务必保留 pointer-events: auto，否则遮罩层无法响应点击交互，导致功能失效。
侧边栏展开时遮罩层不跟随滚动怎么办
大多数开发者会自然想到用 position: fixed 定义遮罩层 .sidebar-backdrop，这个思路是对的。但问题往往出在侧边栏本身——如果它使用了 position: absolute，或者父容器设置了 overflow: hidden，遮罩层就可能被裁剪、错位甚至完全消失。关键在于：确保遮罩层直接挂载到 下，且 z-index 高于侧边栏但低于模态框。推荐使用 z-index: 1040，与 Bootstrap 的 .modal-backdrop 保持一致，从而保证层级关系清晰可靠。
- 用 JavaScript 动态插入遮罩元素：
document.body.insertAdjacentHTML('beforeend', '') - CSS 样式需固定：
.sidebar-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 1040; } - 避免在侧边栏容器上设置
transform或will-change，否则会创建新的层叠上下文，导致遮罩层被压制
Bootstrap 5 中如何触发侧边栏 + 遮罩联动
原生 Bootstrap 并未内置侧边栏组件，需要自行组合 offcanvas 或手动编写。推荐使用 offcanvas——它自带 backdrop 遮罩功能，只需开启 data-bs-backdrop="true"，并确保未被其他样式覆盖，即可正常运作。
- 启用遮罩：
- 禁用点击遮罩关闭：移除
data-bs-backdrop或将其设为"static"，再手动绑定click事件控制显示与隐藏 - 响应式断点需保持一致：侧边栏使用
offcanvas-lg，遮罩的显示与隐藏逻辑也应在lg断点后移除，否则小屏展开时大屏遮罩仍残留，严重影响用户体验
阴影太浅或边缘发虚怎么调
遮罩的“阴影感”实际上来源于半透明黑色背景，而非 box-shadow。许多开发者觉得边缘发虚、压迫感不足，根本原因在于 background 的 alpha 值与过渡动画没有调校到位。
- 不要给遮罩添加
box-shadow，它本身就不需要；要增强压迫感，可将rgba(0,0,0,0.5)提升至0.65，但不要超过0.7，否则底层文字难以辨认 - 让遮罩入场更自然：添加
transition: opacity 0.2s ease-in-out，在 JS 中切换前先设置opacity: 0，再通过offsetWidth强制重排，最后设为opacity: 1 - 移动端需特别注意：iOS Safari 对
fixed结合vh的计算存在偏差，建议使用height: -webkit-fill-available作为兜底方案
侧边栏宽度变化时遮罩没重绘
当侧边栏内容动态加载、高度撑开，或从 collapsed 切换到 expanded 状态时，遮罩并不会自动适配新尺寸——因为它只占满视口，与侧边栏尺寸无关。这其实并非 Bug，而是设计如此，遮罩的职责是阻断背景交互，只需覆盖整个可视区域即可。
- 遮罩本身就不应该“贴合”侧边栏，它的作用是阻止背景交互，覆盖整个可视区就足够了
- 如果发现遮罩下方露出可点击区域，请检查侧边栏是否设置了
margin-left而非transform: translateX()，前者会导致 body 宽度变窄，而遮罩仍按原始 viewport 渲染 - 极端情况（例如侧边栏高度超过视口），无需特殊处理——用户滚动时遮罩已固定，交互阻断依然有效
最后提醒一个最容易忽略的细节：遮罩的 pointer-events: auto 必须保留，否则点击遮罩无法触发关闭逻辑。不少开发者为了“让背后元素不可点击”误将其设为 none，结果遮罩自身也无法响应点击，导致功亏一篑。
