check if the user has reached to bottom of the page

Question

I am trying to trigger an event when the users scrolls down and reaches to the bottom of the page.

I searched the internet and found some posts in stackoverflow but unexpectedly the answers did not work for me.

Ex: Check if a user has scrolled to the bottom

using the answers given for the above SO post, the event I am trying to trigger is executed when reaching the top of the page and not the bottom.

Please let me know if I am going wrong:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
   loadmore();
}
});

function loadmore(){

var lastProd = $('.product_div').last(); 
var lastProdID = $('.product_div').last().prop('id'); 
//console.info(lastProdID); return false;
//var val = document.getElementById("row_no").value;
$.ajax({
    type: 'post',
    url: 'includes/load_products.php',
    data: { getresult:lastProdID },
    success: function (response) {
        console.log(response);
        //var content = document.getElementById("all_rows");
        //content.innerHTML = content.innerHTML+response;
        lastProd.after(response);

        // We increase the value by 10 because we limit the results by 10
        // document.getElementById("row_no").value = Number(val)+10;
    }
});
}

Are there any errors in the console? It will be hard to help you without something reproducible. — Script47, Aug 24 '17 at 10:39
Possible duplicate of [Javascript: How to detect if browser window is scrolled to bottom?](https://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom) — Script47, Aug 24 '17 at 10:47

Ivan · Answer 1 · 2017-08-24T10:44:55.133

4

Use window.innerHeight + window.scrollY to determine bottom position and check if document.body.offsetHeight is lower (equal won't work).

Credit goes to mVChr, see here.

window.onscroll = function(ev) {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    alert("bottom of the page reached");
  }
};

.jump {
  height: 1000px;
}

<div class="jump"></div>

edited Aug 24 '17 at 10:44

answered Aug 24 '17 at 10:42

Ivan

34,531
8
55
100

1

*Credit goes to [mVChr](https://stackoverflow.com/users/246616/mvchr), [see here](https://stackoverflow.com/a/9439807/6331369)* - Then mark/flag it as a duplicate so they actually get the credit. – Script47 Aug 24 '17 at 10:43
1

I had to change it a bit for it to work on android chrome, with the hiding address bar, the result of `(window.innerHeight + window.scrollY) >= document.body.offsetHeight)` was off by a few decimals, so i changed it to : `(window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 1))` for it to work as expected – Xavier C. Jun 21 '21 at 07:52

score 2 · Answer 2 · answered Aug 24 '17 at 10:45

check the height and offset are equal

window.onscroll = function() {
  var d = document.documentElement;
  var offset = d.scrollTop + window.innerHeight;
  var height = d.offsetHeight;

  console.log('offset = ' + offset);
  console.log('height = ' + height);

  if (offset === height) {
    console.log('At the bottom');
    loadmore(); // call function here
  }
};

score 0 · Answer 3 · answered Feb 11 '22 at 20:08

The only proper way to do this, at time of writing Feb/11/2022, is here: Check if a user has scrolled to the bottom in subpixel precision era

That detects bottom of scroll for any element. To do this with the "window" in a default web page, you should set element to document.documentElement or document.scrollingElement to get the result you want.

Or, apply the same Math.abs trick as in that answer with window.scrollY, but not that that does not work with scrollable in any other elements, only the documentElement (that's what element is being scrolled when saying "window scroll", and it is the root <html> element).

check if the user has reached to bottom of the page

3 Answers3