How to Check if a Div is Scrolled All the Way to the Bottom with jQuery?

To check if a div is scrolled all the way to the bottom with jQuery, we can call the on method with 'scroll' and a scroll event handler.

For instance, if we have the following div:

<div style='overflow-y: scroll; height: 100px;'>
  Lorem ipsum dolor sit amet, ...
</div>

then we can write:

const chkScroll = (e) => {
  const elem = $(e.currentTarget);
  if (elem[0].scrollHeight - elem.scrollTop() === elem.outerHeight()) {
    console.log("bottom");
  }
}

$(document).ready(() => {
  $('div').on('scroll', chkScroll);
});

to add the chkScroll function which we use as the div’s scroll event handler.

In the function, we get the div being scrolled with:

const elem = $(e.currentTarget);

Then we check if we scrolled the div to the bottom by writing:

elem[0].scrollHeight - elem.scrollTop() === elem.outerHeight()

scrollHeight has the height of all of the content in the div.

scrollTop returns the location that we scrolled to.

outerHeight has the height of the div.

So if elem[0].scrollHeight - elem.scrollTop() is the same as elem.outerHeight(), we know we scrolled to the bottom.

Therefore, when we scrolled to the bottom, 'bottom' is logged.