部分禁用全屏iOS Web应用程序中的滚动反弹

我有一个简单全屏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或滚动列表当在列表的底部）似乎滚动的东西冒起来，整个应用程序做滚动反弹。

我做的JS斌演示让您体验到的行为为自己（iPhone/iPad的唯一的遗憾 - 它将会照常运行在桌面浏览器*）：

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

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

许多在此先感谢您的帮助，您可以提供。这真的很令人沮丧，我相信这肯定是一个普遍的问题。

*其实，刚刚更新到山狮和最新的Safari和行为是一样的Safari移动了。如果您使用“触摸板滚动上的两根手指”，它是一样的。如果你在清单到达四肢时试着滚动，它会“反弹”。

来源

2012-07-25 swervo

我没有在手，将有足够好的WebKit的任何触摸设备，但你尝试过加入“e.cancelBubble =真;”？

或许用捕获和冒泡阶段事件侦听器，并使用stopPropagation的组合发挥。

来源

2012-08-02 16:16:15 miko

谢谢@miko。看来，cancelBubble已被弃用： [MDN - cancelBubble]（https://developer.mozilla.org/en-US/docs/DOM/event.cancelBubble）有利于e.stopPropagation的（）。无论如何，我试过了，但不幸的是它没有帮助。 – swervo 2012-08-14 14:13:11

部分禁用全屏iOS Web应用程序中的滚动反弹

回答

相关问题