横向切换导航无法滚动

Question

在横向视图中，我有一个可以打开但不会向下滚动以查看更多菜单选项的移动导航。当导航完全关闭时，这有点好，但是我在一个项目上有第二级切换，然后阻止我向下滚动。是否有针对我缺少的 CSS 修复？

它的样式没有什么特别之处 - jQuery 在汉堡菜单图标上打开/关闭，并通过“太阳能服务”链接打开它。

注意 - 在响应模式 (Chrome) 下查看显示页面正在滚动，但导航不随窗口滚动。这个标题也是粘性的/固定在窗口的顶部。

菜单关闭

菜单打开

Answer 1

它并不漂亮，但另一个 SO 帖子启发了以下工作

/* ----------- iPhone 5 and 5S ----------- */
  /* Landscape */
  @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {
    height: 300px;
    max-height: 300px;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch; // mobile safari
  }

  /* ----------- iPhone 6 ----------- */
  /* Landscape */
  @media only screen
    and (min-device-width: 375px)
    and (max-device-width: 667px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {
    height: 300px;
    max-height: 300px;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch; // mobile safari
  }

  /* ----------- iPhone 6+ ----------- */
  /* Landscape */
  @media only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: landscape) {
    height: 300px;
    max-height: 300px;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch; // mobile safari
  }