Question

有人可以帮助解决以下问题吗？

我有一个简单的全屏网页应用程序（针对iOS和移动游戏），包括标题和可滚动列表。

我申请了：

overflow: scroll;
-webkit-overflow-scrolling: touch;

到可滚动元素，我已经应用了以下javascript：

document.addEventListener("touchmove", function (e) {
    e.preventDefault();
}, false);

var theWrapper = document.getElementById("wrapper");
theWrapper.ontouchmove = function(e){
  console.log(e);
  e.stopPropagation();
  e.stopImmediatePropagation();
    // e.preventDefault();
};

试图防止滚动弹跳发生。

这部分成功的原因在于，如果您尝试从标题滚动，赠品网络应用程序反弹不会发生但是如果您将列表滚动到其末端（即列表顶部的scrollUp或滚动时的scrollDown）在列表的底部）似乎滚动的东西冒泡，整个应用程序滚动弹跳。

我已经在JS Bin上做了一个演示，所以你可以自己体验一下这个行为（iPhone / iPad只是抱歉 - 它会在桌面浏览器上正常工作*）：

http://jsbin.com/opetom/4/

将演示添加到您的iphone主屏幕以获得最佳效果。

非常感谢您提供的任何帮助。这真的令人沮丧，我确信这一定是一个普遍的问题。

*实际上，刚刚更新到Mountain Lion和最新的Safari，其行为与移动Safari现在相同。如果你使用“两个手指在触摸板上滚动”它是相同的。如果您在列表位于四肢时尝试滚动，它会“反弹”。

Answer 1

我手边没有任何足够好的webkit，但是你试过添加“e.cancelBubble = true;”吗？

或者可以使用捕获和气泡阶段事件侦听器以及使用stopPropagation的组合。

在全屏iOS网络应用中部分禁用滚动弹跳

1 个答案: