Check if element is fully scrolled

Question

I have following markup structure.

<div class="content-wrapper">
    <div class="content">...</div>
    <div class="content">...</div>
    <div class="content">...</div>
</div>

Now, class content-wrapper is set to have only 80% height of total client-area of page, and has overflow-y set to auto to have a scrollbar when its body doesn't fit in. Note that the inner divs content can be for any number of times. So, question is how can I check if content-wrapper is fully scrolled?

Hint:

Imagine a dynamically loading news feed, where new content is fetched and appended to body of container automatically when container is fully scrolled.

Staunch

Answer 1

var isFullyScrolled = this.scrollTop + this.clientHeight >= this.scrollHeight;

Also I would've subtract a few pixels from scroll height for case with some fractions.

document.querySelector('section').addEventListener('scroll', function (e) {
  var isFullyScrolled = this.scrollTop + this.clientHeight >= this.scrollHeight;
  document.querySelector('output').textContent = isFullyScrolled;
});

html, body, section {
  height: 100%;
  margin: 0;
}

section {
  overflow: auto;
}

div {
  height: 40%;
}

div:nth-child(even) {
  background: silver;
}

output {
  position: absolute;
  left: 8px;
  top: 8px;
  color: red;
  font-family: monospace;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
<output>Scroll</output>

Periscope

Answer 2

If you like to determine if the element is fully scrolled on its width (The x-axis), here is how:

const scrolledElement = document.getElementById(ELEMENT_ID);
const isElementFullyScrolled = scrolledElement.scrollWidth - scrolledElement.scrollLeft === scrolledElement.clientWidth;

Tiffany

Answer 3

You could try and add a div on the end with no content, just give it some height. And check if that div is in viewport. If it is it means that you reached the end of the scroll. Here is a great jQuery plugin for checking if element is in view. http://remysharp.com/2009/01/26/element-in-view-event-plugin/

Hope it helps.

Poundal

Answer 4

You can do something like:

var top = $('.content-wrapper').scrollTop();
var height = $('.content-wrapper').height();
if(top==height) {
//load more data
}

Inoculation

Not helping. :/ note that number and size of inner content divs varies. – Staunch

Then post some fiddle for it to play around. – Inoculation