在页面滚动上加载数据不适用于移动浏览器

Question

I am fetching data from db when i scroll the page. The code works fine on desktop browsers but not on mobile browsers.

I have tried different solutions from different post but all in vain.

$(document).ready(function(){
 $('body').on('touchmove', onScroll);
 $(window).on('scroll', onScroll);
 function onScroll(){
  var lastID = $('.load-more').attr('lastID');
  if(($(window).scrollTop() + window.innerHeight >= document.body.scrollHeight) && (lastID != 0)){
     $.ajax({
        type:'POST',
        url:'getData.php',
        data:'Slno='+lastID,
        beforeSend:function(){
           $('.load-more').show();
        },
        success:function(html){
           $('.load-more').remove();
           $('#postList').append(html);
        }
    });
}
};
});

Answer 1

Try this code :

$(document).ready(function(){
    $('body').on('touchmove', onScroll);
    $(window).on('scroll', onScroll);
    function onScroll(){
        var lastID = $('.load-more').attr('lastID');
        if ($(window).scrollTop() >  $(document).height() - $(window).height() - 100 && (lastID != 0)) {
            $.ajax({
                type:'POST',
                url:'getData.php',
                data:'Slno='+lastID,
                beforeSend:function(){
                    $('.load-more').show();
                },
                success:function(html){
                    $('.load-more').remove();
                    $('#postList').append(html);
                }
            });
        }
    };
});