在JQuery移動中滾動

Question

我正在使用JQuery Mobile創建一個應用程序，它需要同時支持iOS和Android。 （我正在使用PhoneGap）。長頁面上的滾動默認是否工作，或者是否需要設置我的div以支持滾動。如何在iOS上滾動不同於Android設備？

此外，當用戶滾動到頁面底部以檢索更多內容時，是否有辦法使ajax調用？

任何幫助表示讚賞。

Answer 1

如果你瀏覽器窗口溢出，滾動應該會自動發生。對於無限滾動，你可以嘗試http://www.infinite-scroll.com/。

如果您使用的是jQuery Mobile的listview，您可能需要在向dom添加更多列表視圖項以調用過濾行爲和樣式後調用刷新事件。

Answer 2

1） jQuery Mobile 1.1.0使用瀏覽器的本地滾動功能，因此在每個支持的平臺上看起來很自然。然而

jQuery的手機確實需要以下僞頁面結構：

<div data-role="page"> 
    <div data-role="header"> 
     ... 
    </div> 
    <div data-role="content"> 
     ... 
    </div> 
    <div data-role="footer"> 
     ... 
    </div> 
</div> 

如果按照這個結構，你越添加到data-role="content"部分，時間越長，頁面會。

2）您可以設置一個事件處理程序scroll事件來檢測用戶滾動和看多遠了網頁的用戶：

//you don't want to set a bunch of AJAX requests at once, 
//so set a flag so only one will go off at a time 
var ajaxOK = true; 
$(window).on('scroll', function() { 
    var yDistance = $('html, body').scrollTop(); 

    //here you can check how far down the user is and do your AJAX call 
    if ((yDistance + $(window).height()) > ($.mobile.activePage.children('.ui-content').height() - 150)) { 
     //the user is within 150px of the bottom of the page 
     if (ajaxOK === true) { 
      ajaxOK = false; 
      $.ajax({ ... }); 
     } 
    } 
}); 

然後在AJAX調用回調函數您設置了ajaxOK = true;，以便當用戶再次滾動到底部時，它會觸發。

這裏的if/then聲明中scroll事件處理快速擊穿：

(yDistance + $(window).height()) > ($.mobile.activePage.children('.ui-content').height() - 150) 

1. (yDistance + $(window).height())：滾動距離加上視口的高度，找到該網頁的Y的底部座標。
2. ($.mobile.activePage.children('.ui-content').height() - 150)：當前頁面減去150px緩衝區的高度，使用戶可以在150px獲取和