Javascript和Ajax在頁面滾動上加載更多：在運行android或ios的智能手機上不加載更多內容

Question

我有這個javascript和ajax代碼，可以從頁面滾動到底部的數據庫中加載更多數據。 它在台式機和筆記本電腦上運行良好。 但是，從智能手機加載時似乎存在問題。 它會加載前10個項目，而不會像桌面一樣在頁面滾動上加載更多項目。 它不會拋出任何錯誤也不會發出警報。 無論我做什么或如何定位屏幕，它都不會加載更多。

var page_num = 1;
var loading  = false;
load_more_contents(page_num);
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
    page_num++;
    load_more_contents(page_num);
}
});     
function load_more_contents(page_num){
if(loading == false){
    loading = true;
    $('.loading-info').show();
    $.post('load_more_videos.php', {'page': track_page}, function(data){
        loading = false;
        if(data.trim().length == 0)
        {
            $('.loading-info').html('<p> End of records</p>');
            return;
 }
$('.loading-info').hide();

$("#results").append(data);
}).fail(function(xhr, ajaxOptions, thrownError) { 
        alert(thrownError);
    })
}
}

Answer 1

我終於找到了解決方案。 對於將來可能會有所幫助的人。 基本上你只需要偏移頁面的底部即可。 當用戶滾動時，您希望下一批不是加載到頁面底部而是在其上方（注意-100）

$(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() >= $(document).height()-100) {
page_num++;
load_more_contents(page_num);
}
});

這是一個演示： http ： //jsbin.com/humiwek/edit？js，console，output