任何人都可以幫助解決以下問題嗎?部分禁用全屏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移動了。如果您使用「觸摸板滾動上的兩根手指」,它是一樣的。如果你在清單到達四肢時試着滾動,它會「反彈」。
謝謝@miko。看來,cancelBubble已被棄用: [MDN - cancelBubble](https://developer.mozilla.org/en-US/docs/DOM/event.cancelBubble)有利於e.stopPropagation的()。 無論如何,我試過了,但不幸的是它沒有幫助。 – swervo 2012-08-14 14:13:11