Scroll event JQuery - Detecting bottom page

Question

Im trying to make an infinite scroll page. The script works well on my computer (Chrome) but not on my friend's computer (chrome too). I saw it does work when it comes to detect the bottom of the page when the content at the bottom was append via ajax.

I also saw that the loading content works once i change the width of the page ( Just by moving the chrome's console window).

I guess this is because the js does not take into count the DOM.

Any idea ?

start += limit;
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);

$(document).bind("scroll", function() {
       
        if(($(window).scrollTop() + $(window).height()) == $(document).height() || agentID && ($(window).scrollTop() + $(window).height()) + 200 > $(document).height()) {
            load($("#search").val(), start, limit)
            start += limit;
            console.log("End of page detected")
        }
    });

function load(search, start=0, limit=20) {

  $("#loader_active").show()

  let form_data = new FormData();
  form_data.append('search', search);
  form_data.append('start', start);
  form_data.append('limit', limit);


  $.ajax({

    url: "http://website.com/ajax/videos.php",
    contentType: false,
    dataType: "json",
    processData: false,
    cache: false,
    data: form_data,
    type: 'POST',

    success: function (data) {
      $(data).each(function(index, value) {
        showVideo(value) // show video creates divs with jquery     containing the data from the json received by the ajax call
      })
      $("#loader_active").hide()

    }
  })
}

Your `if` condition seems to be `A || B && CC`. Is the intent `(A || B) && C` or `A || (B && C)`? You might try debugging that condition and its values. See [Which Logic Operator Takes Precedence](https://stackoverflow.com/questions/11157814/which-logic-operator-takes-precedence). — showdev, Jun 02 '21 at 21:06
its corresponding to A || (B && C), but this is not the source of the problem. Just trying with A causes the same problem. I'm almost sure it comes from the DOM and the fact the scroll event cant take into count the new height of the scrollbar after adding content with ajax. But I have no idea how to fix it. — , Jun 02 '21 at 22:05
It looks like values like `$(document).height()` are evaluated each time the scroll event fires, so they should reflect dynamic content. Is it possible to build a [working demo](https://stackoverflow.com/help/minimal-reproducible-example) to help reproduce the issue? Maybe you could use something like [reqres.in](https://reqres.in/) to generate sample data via AJAX. For reference, also see [Check if a user has scrolled to the bottom](https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom). — showdev, Jun 02 '21 at 22:25

score 0 · Accepted Answer · answered Jun 06 '21 at 13:40

The problem was caused by the equality condition:

$(window).scrollTop() + $(window).height()) == $(document).height() || agentID && ($(window).scrollTop() + $(window).height()) + 200 > $(document).height())

This can simply be fixed with

$(window).scrollTop() + $(window).height()) > $(document).height() - 100 ) || ( agentID  && ($(window).scrollTop() + $(window).height()) + 200 > $(document).height())

Scroll event JQuery - Detecting bottom page

1 Answers1