我有一个响应迅速的移动网站,可以在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中发生。我究竟做错了什么?
最佳答案
好的,所以我不知道为什么,但是我将css更改为以下内容,并且它起作用了,所以以防万一其他人有相同的问题,这就是我所做的一切
.navbar-default > .menu.container-fluid {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
关于jquery - 在iOS的Safari中无法在Bootstrap导航栏上滚动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58025955/