部分禁用全屏iOS Web应用程序中的滚动反弹
问题描述:
任何人都可以帮助解决以下问题吗?部分禁用全屏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的唯一的遗憾 - 它将会照常运行在桌面浏览器*):
添加演示到您的iPhone主屏幕以获得最佳效果。
许多在此先感谢您的帮助,您可以提供。这真的很令人沮丧,我相信这肯定是一个普遍的问题。
*其实,刚刚更新到山狮和最新的Safari和行为是一样的Safari移动了。如果您使用“触摸板滚动上的两根手指”,它是一样的。如果你在清单到达四肢时试着滚动,它会“反弹”。
答
我没有在手,将有足够好的WebKit的任何触摸设备,但你尝试过加入“e.cancelBubble =真;”?
或许用捕获和冒泡阶段事件侦听器,并使用stopPropagation的组合发挥。
谢谢@miko。看来,cancelBubble已被弃用: [MDN - cancelBubble](https://developer.mozilla.org/en-US/docs/DOM/event.cancelBubble)有利于e.stopPropagation的()。 无论如何,我试过了,但不幸的是它没有帮助。 – swervo 2012-08-14 14:13:11