触摸正文时，iOS Safari 无法滚动绝对 div 的内容（延迟）答案

【问题标题】：iOS Safari can't scroll content of absolute div when body is touched (delay)触摸正文时，iOS Safari 无法滚动绝对 div 的内容（延迟）
【发布时间】：2017-10-19 16:58:11
【问题描述】：

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

问题是当我短时间触摸上部 div（尝试在其中滚动）时，下部 div 将冻结几秒钟。但是当我从屏幕上松开手指并“聚焦”在下部 div 上时，它可以再次滚动。

我认为 iOS 上的 Safari 在“焦点”更改之间存在延迟...有没有办法禁用该延迟？这样我可以在触摸上部 div 后立即滚动底部 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;
}

【问题讨论】：

标签： javascript html safari absolute

【解决方案1】：

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

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

【讨论】：

我试过了，但它并没有解决我的问题......我想也许我的设备专注于错误的 div。但这很奇怪，因为我所有的 div 都隐藏了溢出...