Question

我的网站上有一个全屏菜单覆盖（绝对）。在绝对菜单内是另外两个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;
}

Answer 1

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

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

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

1 个答案: