JavaScript

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()

    }
  })
}

Answer

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

Advertisement

Answer