5

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

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

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

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

4

2 回答 2

8

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

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();
});
于 2012-06-15T09:32:11.173 回答
6

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

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

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

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

于 2011-10-14T06:55:46.670 回答