我有一个基于 Web 的应用程序，其中包含一个用户可以用手指上下滚动的组件。我使用事件的 preventDefault 方法来防止在 iOS 设备上触摸移动移动整个屏幕的默认行为。
不幸的是，这在我今天早上刚刚升级到的 iOS 5 中似乎不再适用。我不得不假设这只是在 iOS 5 中做的不同，但我还没有找到提供说明的资源。
更新 #1：我无法找到特定问题的答案，但我能够稍微调整我的代码以使用 -webkit-overflow-scrolling 样式（设置为“touch”值）并实现时髦的惯性滚动功能（内容滚动速度取决于您的滑动速度，并且如果触及边界会“橡皮筋反弹”回来。看起来很酷......
更新#2：我现在有另一个奇怪的问题。由于某些奇怪的原因，溢出滚动行为有时会混淆，您必须在包含元素上左右拖动手指才能使其内容上下移动。我还没有弄清楚为什么会发生这种情况 - 有人有什么想法吗？
【问题讨论】：
标签： javascript ios5 dom-events preventdefault
我找到了一个非常简单的解决方案。当事件命中允许滚动的元素时，只需标记该事件。在文档上的事件侦听器上，只需检查标志是否已设置，如果未设置标志，则仅停止事件：
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();
});
【讨论】：
首先，我可以使用以下代码验证 e.preventDefault() 是否禁用了 iOS 5 中的所有滚动：
document.ontouchmove = function(e){ e.preventDefault(); }
但是，不幸的是，这会禁用 overflow:scroll div 上的滚动。 （如果有人有启用内部元素滚动的解决方案，请分享。）
关于更新#2，当一个可滚动元素嵌套在另一个可滚动元素（包括页面本身）中时，我注意到了奇怪的行为。有时设备会犹豫用户打算滚动哪个元素。特别是我注意到这个问题使用位置：固定。我的解决方案是确保 body 具有 100% 的高度，并且可滚动元素尽可能使用 position:absolute。
【讨论】：
if($(e.currentTarget).css('overflow') != 'scroll') e.preventDefault();。由于 document.ontouchmove 将在 scollable 元素的 ontouchmove 之后触发，您可以执行 el.ontouchmove = function() {allowScroll = true} 然后让 document.ontouchmove 使用该值来确定操作，然后将该值设置回 false。