iOS 当 body 被触摸时，Safari 无法滚动绝对 div 的内容（延迟）

Question

我的站点中有一个全屏菜单覆盖（绝对）。在绝对菜单中还有另外两个 div。上面的 div 是静态的 div，其中包含站点徽标。下方 div 包含一个可滚动列表（overflow-y: auto）。

问题是，当我短时间触摸上面的 div（尝试在其中滚动）时，下面的 div 会冻结几秒钟。但是当我从屏幕上松开手指，'focus' 在下方 div 上时，它可以再次滚动。

我认为 iOS 上的 safari 在 'focus' 更改之间有延迟...有没有办法禁用该延迟？这样我就可以在我触摸到上部后立即滚动底部div？

我已经在 JSFiddle 中重新创建了我的代码，但是当我导航到 JSFiddle 页面时，我无法在 iPhone 上模拟确切的问题...https://jsfiddle.net/g87cge1q/4/

<body>
  <div class="navbar">
    <div class="nav-top">
      Top Test

    </div>
    <div class="nav-content">
      <ul>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
      </ul>
    </div>
  </div>
</body>

div {
  display:block;
  float:left;
}

body {
  width: 100%;
  height: 100%;
  max-height:100%;
  overflow:hidden;
  background-color: green;
  padding:0;
  margin:0;
}

.navbar {
   position:absolute;
   top:0;
   bottom:0;
   width: 100%;
   height: 100%;
   max-height: 100%;
   overflow:hidden;
 }

.nav-top {
  width: 100%;
  height: 50px;
  background-color:red;
}

.nav-content {
  width: 100%;
  background-color: yellow;
  height:100%;
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden
}

.content-to-be-hidden-beneath-the-navbar {
  display:block;
}

Answer 1

您可以试试 Fastclick 库看看是否有帮助。它的目的是消除浏览器在确定您是要滚动还是点击时的 300 毫秒延迟。我过去用过它，效果很好。

https://ftlabs.github.io/fastclick/

iOS 当 body 被触摸时，Safari 无法滚动绝对 div 的内容（延迟）

iOS Safari can't scroll content of absolute div when body is touched (delay)

html

javascript

safari

absolute