iOS下Off Canvas菜单无法滚动，页面主体反而滚动的问题求助

核心问题分析 #

1. 结构错误：你的off-canvas-wrapper仅包裹了Off Canvas菜单，而Foundation要求该容器必须同时包含页面主内容区和Off Canvas菜单，否则data-content-scroll等属性无法正常工作，也会导致菜单滚动区域失效。
2. 滚动容器未配置：菜单内部的内容容器没有设置合适的高度和溢出属性，导致内容超出后无法滚动。

修复步骤 #

1. 修正Off Canvas结构 #

将off-canvas-wrapper移到页面最外层，包裹所有内容（包括导航栏和页面主体），示例结构如下：

<div class="off-canvas-wrapper">
  <!-- 页面主内容区 -->
  <div class="off-canvas-content" data-off-canvas-content>
    <div class="nav-mobile">
      <div class="grid-x nav-bar">
        <div class="cell small-4 medium-5 menu">
          <img class="mobile-menu" src="~/Content/Images/mobile-menu-bg.png" data-toggle="offCanvasMenuProductsMobile" alt="Mobile menu icon" />
        </div>
        <div class="cell small-4 medium-2 logo">
          <a href="/">
            <img class="lazy" alt="" src="" data-src="" />
          </a>
        </div>
        <div class="cell small-4 medium-5 account-menu">
          <a class="menu-item" href="@Model.NavBar.Basket.LinkUrl">
            <img src="/Content/Images/basket.svg" alt="Account icon" />
          </a>
        </div>
      </div>
      <!-- 页面其他内容 -->
    </div>
  </div>

  <!-- Off Canvas菜单 -->
  <div class="off-canvas position-left" id="offCanvasMenuProductsMobile" data-off-canvas data-content-scroll="false">
    <div class="content">
      <!-- 菜单原有内容 -->
      <div class="heading">...</div>
      <div class="body">...</div>
    </div>
  </div>
</div>

2. 添加CSS确保菜单滚动 #

给Off Canvas菜单及内部容器设置高度和滚动属性：

.off-canvas.position-left {
  height: 100vh; /* 占满视口高度 */
}

.off-canvas .content {
  height: 100%;
  overflow-y: auto; /* 内容超出时垂直滚动 */
  padding-bottom: 2rem; /* 避免底部内容被遮挡 */
}

/* 可选：修复滚动条样式（按需调整） */
.off-canvas .content::-webkit-scrollbar {
  width: 6px;
}
.off-canvas .content::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.off-canvas .content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

3. 验证data-content-scroll属性 #

确保data-content-scroll="false"正确添加到Off Canvas元素上，该属性会在菜单打开时自动禁用主内容区的滚动，无需额外jQuery代码。如果仍有问题，可以补充以下JS代码强制控制：

$(document).on('open.zf.offcanvas', '#offCanvasMenuProductsMobile', function() {
  $('body').css('overflow', 'hidden');
});

$(document).on('close.zf.offcanvas', '#offCanvasMenuProductsMobile', function() {
  $('body').css('overflow', 'auto');
});

关键说明 #

• Foundation的Off Canvas依赖正确的层级结构，off-canvas-wrapper必须包含off-canvas-content（主内容）和off-canvas（菜单）两个部分，这是滚动功能正常工作的前提。
• 菜单内部的滚动容器必须设置height: 100%和overflow-y: auto，否则内容溢出后无法触发滚动。

内容的提问来源于stack exchange，提问作者Rob