ios，webkit-overflow-scrolling：滚动列表上的触摸识别被破坏

Question

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

1. 启动滚动
2. 在列表仍在滚动时触摸列表元素

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

编辑

目前的解决方法：

检查滚动方式：

$('.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 节。

Answer 2

在我的例子中，简单地用 -webkit-overflow-scrolling: touch; 将列表包装在额外的 div 中有助于解决这个问题。