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

Question

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

不幸的是，这似乎不再适用于我今天早上刚刚升级到的 iOS 5。 我必须假设这只是在 iOS 5 中完成的不同，但我还没有能够找到提供说明的资源。

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

更新 #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 tap在我的情况下：

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

Answer 2

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

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

然而不幸的是，这会禁用滚动溢出：滚动 div。 （如果有人有启用内部元素滚动的解决方案，请分享。）

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