ios, webkit-overflow-scrolling : touch recognition on scrolling list is broken

Question

正如所讨论的 here in the apple forum使用 webkit-overflow-scrolling: touch 时在列表中，触摸识别被破坏。

发起滚动

在列表仍在滚动时触摸列表元素

被触摸的元素不是唯一实际被击中的元素，而是在步骤 1 中触摸以启动滚动的元素。我尝试使用 iScroll 复制 native 滚动但失败了。滚动非常缓慢且完全无法使用。尽管等待列表停止，有什么办法可以解决？ :( 提前谢谢

编辑

目前的解决方法:

通过以下方式检查滚动:

$('.myList').on('touchmove', function(event {
  App.set('scroll', true);
});

拒绝滚动后的第一次触摸:

click : function(event) {

  if (App.get('scroll')) {
    App.set('scroll', false);
    return false;
  } else {
    this.performClick();
    return true;
  }
}

现在所有ios用户都必须触摸两次......有没有办法捕捉第一次触摸的坐标并在相同坐标处模拟第二次触摸？

Answer 1

我从你的描述中了解到，你有一个锯齿状的滚动效果。我认为您可能会关注悬停事件而不是触摸和滚动事件。

如果您为列表项(或其任何父或子元素)设置了 :hover，它将干扰您的触摸。触摸设备将首先模拟悬停效果，然后是您的单击/滚动事件。这导致锯齿状的滚动。清除所有 :hover 状态并再次检查是否遇到同样的问题。

我写了一篇关于响应式设计的详细文章和演示文稿。你可以找到它here .请查看第 8,9 和 12 节。