jQUery know when we reach end of div

Question

I want to load ajax data when I reach the end of a particular div.

I use now :

$(window).scroll(function() {
    if (! loadingAjax) {
        if ($(window).scrollTop() > ($element.offset().top + $element.outerHeight() - 500)) {
            from++;
            loadingAjax = true;
            loadMyData(from);
        }
    }
});

It seems a little random when I show console for example, or on smartphone.

What is the best way to detect user is reaching end of a div ($element here) ? With an offset of 50px for example before the end ?

I believe that stackoverflow is full of similar questions... see https://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll — jare25, Oct 18 '19 at 08:31
This question (like a lot of others) don't answer my question. Read comments of accepted answer, and you will see the original question is not answered. — Vincent Decaux, Oct 18 '19 at 08:39

score 0 · Answer 1 · answered Oct 18 '19 at 08:32

0

Please have a look at the solution and you will be console logged in the last div.

$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top + 
  $('.posts').outerHeight() - window.innerHeight) {
      console.log('End Div');
  }
});

answered Oct 18 '19 at 08:32

sibabrat swain

1,277
8
20

Ok, the window.innerHeight seems to make it more accurate. Thanks – Vincent Decaux Oct 18 '19 at 08:42
Please accept the answer if you feel it to be accurate and serves your purpose. – sibabrat swain Oct 18 '19 at 08:57

jQUery know when we reach end of div

1 Answers1