部分禁用全屏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應用程序中的滾動反彈

回答

相關問題