1

任何人都可以帮助解决以下问题吗？

我有一个简单的全屏 Web 应用程序（针对 iOS 和移动 safari），它包含一个标题和一个可滚动列表。

我已申请：

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 相同。如果您使用“触摸板上的两根手指滚动”，则相同。如果您在列表处于末端时尝试滚动，它会“反弹”。

4

1 回答 1

0

我手头没有任何具有足够好的 webkit 的触摸设备，但是您是否尝试过添加“e.cancelBubble = true;”？

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

于 2012-08-02T16:16:15.657 回答