How to fix infinite scroll javascript?

Question

I am trying to make infinite scroll loads data with below script. Initial data loads correctly but seems like no scroll is detected. I've tried adding alert to debug but I can't seem to find the problem. Backend page p_load.php is working fine. Any idea what might be the issue?

$(document).ready(function() {
    var track_load = 0; //total loaded record group(s)
    var loading  = false; //to prevents multipal ajax loads
    var total_groups = 2; //total record group(s)   

    $('#result').load("p_load.php?t=", {'group_no':track_load}, function() {track_load++;}); //load first group

    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
            alert("Detected scrolling"); //not working
            if(track_load <= total_groups && loading==false) //there's more data to load
            {
                loading = true; //prevent further ajax loading
                $('.animation_image').show(); //show loading image

                //load data from the server using a HTTP POST request
                $.post('p_load.php?t=',{'group_no': track_load}, function(data){

                    $("#result").append(data); //append received data into the element

                    //hide loading image
                    $('.animation_image').hide(); //hide loading image once data is received

                    track_load++; //loaded group increment
                    loading = false; 

                }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                    alert(thrownError); //alert with HTTP error
                    $('.animation_image').hide(); //hide loading image
                    loading = false;

                });

            }
        }
    });
});

Vladimir.V.Bvn · Accepted Answer · 2019-06-30 22:46:25Z

1

Please try:

  $(document).on('scroll', function () {
    if(window.scrollY + window.innerHeight >= document.body.scrollHeight) {
        //your code
    };
  });

edited Jun 30, 2019 at 22:46

answered Jun 30, 2019 at 21:43

Vladimir.V.Bvn

1,1381 gold badge14 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ivan Over a year ago

Tried both (outside ready function and your modification with scrollY). No luck. Simple alert wont work. :(

Vladimir.V.Bvn Over a year ago

Do you see the scrolling line on the right on the window? Maybe your CSS sets "overflow: hidden" somewhere. Please try $(document).on('scroll', function () instead of $(window).

Ivan Over a year ago

Problem fixed. It should be inside ready function as original. Only it should monitor $(document).scroll( as you suggested. Please edit answer in order to mark it completed.

Adrian Brand · Accepted Answer · 2019-06-30 23:37:49Z

0

You should be using the Intersection Observer API, that is what it is for.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

answered Jun 30, 2019 at 23:37

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to fix infinite scroll javascript?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related