如何防止 iOS 5 中 touchmove 事件的默认行为？

Question

我有一个基于 Web 的应用程序，其中包含一个用户可以用手指上下滚动的组件。我使用该事件的 preventDefault 方法来防止触摸移动在 iOS 设备上移动整个屏幕的默认行为。

不幸的是，这在我今天早上刚刚升级到的 iOS 5 中似乎不再起作用了。我必须假设 iOS 5 中的做法有所不同，但我还没有找到提供说明的资源。

更新#1：我无法找到我的具体问题的答案，但我可以稍微调整我的代码以使用 -webkit-overflow-scrolling 样式（设置为一个值的“触摸”）并实现时髦的惯性滚动功能（其中内容滚动得更快，具体取决于您滑动的速度，并且如果触及边界，则会“橡皮筋反弹”回来。看起来很酷......

更新＃2：我现在还有另一个奇怪的问题。由于某些奇怪的原因，溢出滚动行为有时会混淆，您必须在包含元素上左右拖动手指才能使其内容上下移动，我还没有弄清楚为什么会发生这种情况 -有人有什么想法吗？

Answer 1

我找到了一个非常简单的解决方案。当事件击中允许滚动的元素时，只需标记该事件即可。在文档的事件侦听器上，只需检查是否设置了标志，并且仅在未设置标志时停止事件：

this.$scrollableEl.on('touchmove', function(event){
  event.comesFromScrollable = true;
  // when you have containers that are srollable but 
  // doesn't have enough content to scroll sometimes:
  // event.comesFromScrollable = el.offsetHeight < el.scrollHeight;
});

$(document).on('touchmove', function(event){
    if (!event.comesFromScrollable){
      event.preventDefault();
    }
});

您还可以使用 event.stopImmediatePropagation 相反，因此您不需要文档元素上的 eventListener，但这会破坏 zepto.js在我的例子中点击：

this.$scrollableEl.on('touchmove', function(event){
  event.stopImmediatePropagation();
});

Answer 2

首先，我可以使用以下代码验证 e.preventDefault() 是否禁用了 iOS 5 中的所有滚动：

document.ontouchmove = function(e){ e.preventDefault(); }

然而，不幸的是，这会禁用 Overflow:scroll div 上的滚动。 （如果有人有一个使内部元素滚动启用的解决方案，请分享。）

关于 update#2，我注意到当可滚动元素嵌套在另一个可滚动元素（包括页面本身）中时出现奇怪的行为。有时，设备会犹豫用户打算滚动哪个元素。特别是我使用position:fixed注意到了这个问题。我的解决方案是确保主体具有 100% 的高度，并且可滚动元素尽可能使用position:absolute。