如何让Bootstrap 5中的Offcanvas菜单可滚动？

Bootstrap 5本身就提供了内置的类和默认行为来处理Offcanvas的滚动需求，不用额外写复杂CSS，给你两个实用方案：

方案1：利用默认的offcanvas-body滚动行为 #

Offcanvas的标准结构里，.offcanvas-body默认已经设置了overflow-y: auto——只要菜单内容高度超过Offcanvas的可用高度，就会自动出现垂直滚动条。你只需要确保结构正确：

<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileMenu" aria-labelledby="mobileMenuLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="mobileMenuLabel">移动端菜单</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <!-- 这里放你的长菜单内容 -->
    <ul class="list-unstyled">
      <li><a href="#" class="d-block py-3 border-bottom">首页</a></li>
      <li><a href="#" class="d-block py-3 border-bottom">产品列表</a></li>
      <li><a href="#" class="d-block py-3 border-bottom">关于我们</a></li>
      <li><a href="#" class="d-block py-3 border-bottom">联系客服</a></li>
      <li><a href="#" class="d-block py-3 border-bottom">帮助中心</a></li>
      <li><a href="#" class="d-block py-3 border-bottom">隐私政策</a></li>
      <!-- 更多菜单项... -->
    </ul>
  </div>
</div>

方案2：强制启用滚动（默认行为不生效时） #

如果因为自定义样式导致默认滚动失效，可以显式给元素加Bootstrap的内置类：

• 给.offcanvas加h-100类，让它占满视口高度
• 给.offcanvas-body加overflow-y-scroll类，强制显示滚动条（不管内容是否超出）

示例代码：

<div class="offcanvas offcanvas-start h-100" tabindex="-1" id="scrollableMenu" aria-labelledby="scrollableMenuLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="scrollableMenuLabel">可滚动菜单</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body overflow-y-scroll">
    <!-- 长内容区域 -->
  </div>
</div>

注意事项 #

• 避免给.offcanvas或.offcanvas-body设置固定高度（比如height: 500px），优先用Bootstrap的响应式高度类（h-100、h-75等）
• 检查页面body或父容器有没有设置overflow: hidden，这会影响Offcanvas的滚动

内容的提问来源于stack exchange，提问作者This Is Me