在 iOS 上的 Safari 中滚动 Bootstrap 导航栏不起作用答案

【问题标题】：Scroll on Bootstrap navbar not working in Safari on iOS在 iOS 上的 Safari 中滚动 Bootstrap 导航栏不起作用
【发布时间】：2019-09-20 09:50:47
【问题描述】：

我有一个在 Chrome 和 IE 上运行良好的响应式移动网站。但是在 Safari 中，它不允许您向下滚动页面。

Bootstrap 有一个 340px 的 max-height 和 340px，我已将其覆盖并将其设置为 100vh 的高度，这在 Safari 中也不起作用，我在页面上附加了一个溢出。

<nav class="navbar navbar-default navbar-fixed-top visible-xs menu-open">
  <div class="container-fluid menu">
    <div class="collapse navbar-collapse" id="navbar-collapse-menu" data-class="menu" data-text="Menu">
      //blah blah content opens
    </div>
  </div>
</nav>

/* Bootstrap CSS */
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: 340px;
}

/* My CSS */
.menu-open>.container-fluid {
  height: 100vh !important;
}

.navbar-default>.menu.container-fluid {
  overflow-x: scroll;
  overflow-y: scroll;
}

.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: none !important;
}

我尝试添加以下内容

-webkit-overflow-scrolling: touch;

它仍然不能滚动我的页面，这只发生在 Safari 中。我做错了什么？

【问题讨论】：

你在 html 中使用什么标题，例如
是的，我使用了@Grumpy，正是这样，我也尝试了 height=device-height 但没有任何反应

标签： jquery html css mobile-safari safari-windows

【解决方案1】：

好的，所以我不知道为什么，但是我将 css 更改为以下内容并且它起作用了，所以以防其他人有同样的问题，这就是我所做的一切

.navbar-default > .menu.container-fluid {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

【讨论】：