2011-12-24 31 views
0

我開發了一個包含應用程序內容的中間包含固定頁眉和頁腳以及可滾動div的ajax網站。該網站在移動設備上也很出色(iPad,Android等),除了當用戶到達中間可滾動div的底部時,彈性滾動進入遊戲並且頁面的底部從屏幕底部。當它們到達可滾動div的頂部時也是如此。手機網站防止彈性頁面滾動

我知道你可以完全防止彈性滾動通過執行以下操作:

$('#Platform').bind('touchmove', function (e) {  
    e.preventDefault();  
}); 

但是這顯然阻止任何滾動可言,然後用戶無法看到應用程序的內容。我的想法是在上述事件中添加一些條件邏輯,以使e.preventDefault()僅在用戶位於div頂部時被調用,並且它們試圖向上滾動或者它們位於div,他們試圖向下滾動。我開始做這樣的事情:

$('#Platform').bind('touchmove', function (e) { 
    var platform = $('#Platform'); 
    if ((platform.scrollTop() + platform.innerHeight()) >= platform[0].scrollHeight) { 
     e.preventDefault(); 
    } 
}); 

上面的代碼基本上決定,如果他們是在滾動div的底部,如果是這樣,e.preventDefault()被調用。這是偉大的,但一旦他們觸及div的底部,他們將永遠無法再滾動!我想我必須以某種方式確定用戶在哪種方式下滑動並將其包含在我的邏輯中。如果他們在底部並向下滑動,請勿滾動。但是,如果他們在底部並向上滑動,請允許他們滾動。當他們在div的頂端時,反之亦然。

這是完成我的目標的最佳方式嗎?有沒有更好的辦法?如果這是我應該做的,那麼如何確定滑動的方向?

另外,是否有更簡單的方法來測試iPad,iPhone,Android設備上的網站,而不必將其部署到開發服務器?除了我無法輕鬆調試代碼外,我會更多地使用我提出的解決方案。

謝謝。

回答

0

http://cubiq.org/iscroll-4非常適合您的使用。 如果您有Mac,那麼您可以輕鬆地調試您的程序,然後您只需使用下載xCode/iPhone SDK時獲得的iPhone/iPad模擬器。