如何防止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,但这会破坏tap我的情况下的zepto.js :

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.