在iOS的Safari中无法在Bootstrap导航栏上滚动

时间:2019-09-20 09:50:47

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

我有一个响应迅速的移动网站,可以在Chrome和IE上正常运行。但是,在Safari中,它不允许您向下滚动页面。

Bootstrap的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中发生。我在做什么错了?

1 个答案:

答案 0 :(得分:1)

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

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