How to detect if browser window is scrolled to bottom?

Cross-browser compatibility // Be aware of browser differences

When developing for a variety of browsers, it's crucial that you use window.pageYOffset instead of window.scrollY to cover compatibility issues:

window.addEventListener('scroll', () => {
  if (window.innerHeight + (window.pageYOffset || document.documentElement.scrollTop) >= document.documentElement.offsetHeight) {
    console.log('You\'ve reached the bottom! Or, is it just the start?');
  }
});


Just keep in mind, window.scrollY is not supported in Internet Explorer. Hence, we provide window.pageYOffset as a fallback.

Anticipate UI variances // Don't let the toolbars trick you

Sometimes, the scrollable area's bottom may not be the actual bottom of your page due to UI elements like toolbars or sticky footers. Modify your detection logic to factor these in:

const OFFSET_TOLERANCE = 10; // pixels; adjust as needed to suit your fancy UI

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.pageYOffset >= document.documentElement.scrollHeight - OFFSET_TOLERANCE) {
    console.log('Bottom or very close to it! Like that time when you nearly caught the bus...');
  }
});


This OFFSET_TOLERANCE ensures that our events get triggered, even when a stubborn sticky footer wants to make us believe we are not at the bottom!

Auto-scrolling considerations // No one wants to manually scroll 'forever'

When your page has a lot of dynamic content loading at the bottom, you might want to give your users' scrolling fingers a rest and auto-scroll to the new content...but only if they are already at the bottom. Here's a pattern that can ease their suffering:

function isUserAtBottom() {
  // Let's see if our friend here is at the rock bottom
  return window.innerHeight + window.pageYOffset >= document.documentElement.scrollHeight;
}

function scrollToBottom() {
  // Sending you right to the bottom, hold tight!
  window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
}

// ...somewhere in your code, after appending new content

if (isUserAtBottom()) {
  scrollToBottom();
}


Handling dynamic content and layout changes

When content is dynamically added to the page or the layout changes, make sure to recalculate the page height to maintain accurate scroll position checking:

// Recalculate your location after you've added content,
// like recalculating your budget after a spending spree.
function reCalculatePageHeight() {
  // Your logic to recalculate height
}

window.addEventListener('resize', reCalculatePageHeight);


You should be aware that font size adjustments can affect scroll height as well. The moral of the story is, catch all the changes by subscribing to the right events.