jquery - 滚动引导导航栏在 iOS 上的 Safari 中不起作用

标签 jquery html css mobile-safari safari-windows

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

Bootstrap 的 max-height340px,我已将其覆盖并将其设置为 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 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58025955/

相关文章:

html - 使用 CSS 和 HTML 内联显示

jquery - 如何不显示或 .remove() 具有 # 符号的标签

javascript - jquery - 获取其他页面的内容

php - 网站上的服务器端随机数生成器

html - 如何设置内联 block html 元素的宽度以填充父级而不扩展到父级外部

twitter-bootstrap - 显示两个 Logo ,一个在右侧,一个在左侧,在导航栏 + Bootstrap 之间

javascript - 如何解决悬停时图像链接的问题?

javascript - 在 jQuery 中获取元素的 HTML

javascript - 从 HTML IFRAME 调用 JS 函数(均为 Web 资源)

jquery - 如何使用 jQuery 将 <br> 字符串转换为实际的 HTML <br>?