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

Partially disabling scroll bounce in full screen iOS web app

本文关键字：应用程序 滚动 web iOS      更新时间：2024-02-11

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

我有一个简单的全屏网络应用程序（针对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();
};

以试图防止滚动反弹的发生。

这在一定程度上是成功的，因为如果你尝试从标题滚动，赠品网络应用程序不会反弹，但如果你将列表滚动到其末端（即，在列表顶部向上滚动或在列表底部向下滚动），滚动的东西似乎会弹出，整个应用程序都会反弹。

我在JS Bin上做了一个演示，这样你就可以亲身体验这种行为了（iPhone/iPad很抱歉，它在桌面浏览器上可以正常工作*）：

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

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

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

*事实上，刚刚更新到Mountain Lion和最新的Safari，其行为与现在的移动Safari相同。如果你使用"两个手指在触摸板上滚动"，这是一样的。当列表处于末端时，如果您尝试滚动，它会"反弹"。

我手头没有足够好的webkit触摸设备，但你试过添加"e.cancelBubble=true；"吗？

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

相关文章：