Infinite scrolling - via .onscroll (execute code on scrolling)

[tdoran]

Using window.onscroll = function(){ } you can execute code as the user scrolls your page.

The code below will track the height of the page using document.documentElement.offsetHeight and compare it to the height scrolled with document.documentElement.scrollTop + the height of the window window.innerHeight.

Then using if (offset >= (height * 0.9)) you can execute code when the amount scrolled + height of window is equal to 90% of the height of the page (i.e. the user has almost reached the bottom).

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

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

  if (offset >= (height * 0.9)) {
    console.log('At 90%');
    height = document.documentElement.offsetHeight;
  }
};

I haven't got it working perfectly at this stage - The tricky part is making sure the code will only be executed once when it reaches 90% - so comments/corrections welcome.

[jennah2121]

I think the intersectionObserver also allows you to do this but in an asynchronous way which is better for performance (not 100% sure on this). You also don't have to do any calculations :)

I found it relatively easy to get working. However, its not fully supported yet. For anyone who's interested I found the following links helpful:

• MDN page for the intersection Observer API
• lazy loading images blog post - its not too long and has a nice example with lots of explanation
• Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver - its quite long but not too hard to understand and talks about why you might want to use an intersectionObserver