Question

我有一个基于网络的应用程序，其中包含一个用户可以用手指向上和向下滚动的组件。我使用事件的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。

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

2 个答案: