Bootstrap如何实现响应式的侧边栏弹出时背景不滚动

Offcanvas打开后背景仍可滚动，根本原因是data-bs-backdrop="static"与data-bs-keyboard="false"未同时设置，导致modal-open类被意外移除；二者缺一不可，且HTML中属性值必须为字符串，JS初始化时对应参数须为布尔值。

Offcanvas 打开后背景还能滚？检查 data-bs-backdrop 和 data-bs-keyboard 是否配齐

背景滚动没锁住，大概率不是 overflow 没生效，而是 Offcanvas 的关闭交互配置不完整。Bootstrap 默认会自动给 body 加 modal-open 类并设 overflow: hidden，但这个机制只在「两个属性都正确设置」时才稳定触发。

1. data-bs-backdrop="static" 禁用点击遮罩层关闭，但不拦 ESC 键
2. data-bs-keyboard="false"（注意是字符串 "false"，不是布尔值）禁用 ESC 关闭
3. 漏掉任一属性，用户点一下背景或按一下 ESC，Offcanvas 就关了，modal-open 被移除，背景立刻恢复滚动
4. 别写成 data-backdrop 或 data-bs-keyboard="0"——属性名和值都必须严格匹配文档

为什么关掉 Offcanvas 后页面卡死、不能滚？多层弹窗时 modal-open 被误删

单个 Offcanvas 正常，但嵌套使用（比如从 Offcanvas 里再打开一个 Modal 或另一个 Offcanvas）时，底层组件关闭会触发 Bootstrap 默认逻辑：删掉 body 上的 modal-open。可上层还开着，结果背景就“意外可滚”或“关完还锁着”。

1. 监听 hidden.bs.offcanvas 事件，用 document.querySelectorAll('.offcanvas.show').length 判断是否还有其他 Offcanvas 在显示
2. 如果有，手动补回：document.body.classList.add('modal-open')
3. 别依赖 document.body.classList.contains('modal-open')——第三方插件可能乱加类，数值统计更可靠
4. 避免在关闭回调里直接写 $('body').removeClass('modal-open')，jQuery 可能因 DOM 状态不同步漏操作

移动端页面“向左抽一下”？别碰 padding-right，改用 data-bs-backdrop="static"

这不是滚动问题，是 Bootstrap 为补偿滚动条消失，在 body 上加了 padding-right: 17px。fixed 定位的导航栏、页脚等元素没跟着右移，视觉上就像整个页面被吸向左边。

1. data-bs-backdrop="static" 是最干净的解法：它跳过 padding 补偿和 modal-open 类管理，同时保留 ESC 关闭能力
2. 如果必须支持点击遮罩关闭，就手动接管滚动锁定：show.bs.offcanvas 里设 document.body.style.overflow = 'hidden'，但别加类、别设 padding
3. 别用 body { overflow: hidden !important } 全局覆盖——多层弹窗时容易冲突，关第一层就恢复滚动，第二层还在开着

React-Bootstrap 的 Offcanvas 怎么配？JS 初始化参数类型和 HTML 属性相反

在 React 项目里用 react-bootstrap/Offcanvas，HTML 属性和 JS 构造函数对同一参数的要求完全相反，混用直接报错。

1. HTML 中：data-bs-backdrop="static" ✅，data-bs-backdrop="false" ❌（会被当作文本值忽略）
2. JS 初始化时（比如 new bootstrap.Offcanvas(el, { ... })）：backdrop: false ✅，backdrop: 'static' ❌（类型错误，Blazor 场景会明确报 “Option 'backdrop' provided type 'string' but expected type 'boolean'”）
3. 同理：keyboard: false（JS），data-bs-keyboard="false"（HTML）
4. Blazor 用户别用 HTML 属性传参，直接在 JS 里 new 实例时传 { backdrop: false, keyboard: false }

复杂点在于多层弹窗的状态同步——modal-open 类不是“开关”，而是“计数器”，但 Bootstrap 自身没做计数，得你用 DOM 查询来兜底。容易被忽略的是：哪怕只用一个 Offcanvas，只要全局 CSS 有 body { overflow: visible !important }，照样失效。