Javascript iOS Safari可以'；触摸主体时滚动绝对div的内容（延迟）_Javascript_Html_Safari_Absolute

Javascript iOS Safari可以'；触摸主体时滚动绝对div的内容（延迟）

javascript html safari

Javascript iOS Safari可以'；触摸主体时滚动绝对div的内容（延迟）,javascript,html,safari,absolute,Javascript,Html,Safari,Absolute,我有一个全屏菜单覆盖在我的网站（绝对）。在绝对菜单中还有另外两个div。上面的div是包含站点徽标的静态div。下div包含一个可滚动列表（overflow-y:auto）问题是，当我短时间触摸上方的div（尝试在其中滚动）时，下方的div将冻结几秒钟。但当我把手指从屏幕上松开，然后“聚焦”在较低的div上时，它就可以再次滚动了我认为iOS上的safari在“焦点”改变之间有一个延迟。。。有没有办法禁用该延迟？这样我可以在触到上一个div后立即滚动下一个div？我已经在JSFIDLE中重新

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

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

我认为iOS上的safari在“焦点”改变之间有一个延迟。。。有没有办法禁用该延迟？这样我可以在触到上一个div后立即滚动下一个div？

我已经在JSFIDLE中重新创建了代码，但是当我导航到JSFiddle页面时，我无法在iPhone上模拟出确切的问题


顶部测试

菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项
菜单项

div{
显示：块；
浮动：左；
}
身体{
宽度：100%；
身高：100%；
最大高度：100%；
溢出：隐藏；
背景颜色：绿色；
填充：0；
保证金：0；
}
navbar先生{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
身高：100%；
最大高度：100%；
溢出：隐藏；
}
.导航顶部{
宽度：100%；
高度：50px；
背景色：红色；
}
.导航内容{
宽度：100%；
背景颜色：黄色；
身高：100%；
最大高度：100%；
溢出y：自动；
溢出-x：隐藏
}
。要隐藏在导航栏下的内容{
显示：块；
}

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

我试过了，但没有解决我的问题。。。我想可能是我的设备把焦点放错了分区。但这很奇怪，因为我所有的分区都隐藏了溢出。。。

<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;
}