2012-07-25 62 views
1

任何人都可以幫助解決以下問題嗎?部分禁用全屏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移動了。如果您使用「觸摸板滾動上的兩根手指」,它是一樣的。如果你在清單到達四肢時試着滾動,它會「反彈」。

回答

0

我沒有在手,將有足夠好的WebKit的任何觸摸設備,但你嘗試過加入「e.cancelBubble =真;」?

或許用捕獲和冒泡階段事件偵聽器,並使用stopPropagation的組合發揮。

+0

謝謝@miko。看來,cancelBubble已被棄用: [MDN - cancelBubble](https://developer.mozilla.org/en-US/docs/DOM/event.cancelBubble)有利於e.stopPropagation的()。 無論如何,我試過了,但不幸的是它沒有幫助。 – swervo 2012-08-14 14:13:11

相關問題