Javascript 和 Ajax 在页面滚动上加载更多：在运行 android 或 ios 的智能手机上不加载更多答案

【问题标题】：Javascript and Ajax Load more on page scroll: not loading more on smart phones running android or iosJavascript 和 Ajax 在页面滚动上加载更多：在运行 android 或 ios 的智能手机上不加载更多
【发布时间】：2017-03-02 09:11:06
【问题描述】：

我有这个 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);
    })
}
}

【问题讨论】：

标签： javascript jquery ajax

【解决方案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

【讨论】：