How can I get the scrollbar position with JavaScript?

Element-specific Scrollbar Position

To get the scrollbar position of a specific element, use the scrollTop and scrollLeft properties. They give you vertical and horizontal scroll positions relative to the element's view:

const element = document.querySelector('.scrollable-element'); // Pick your scrollable element
const scrollPos = {
  vertical: element.scrollTop, // Vertical scroll insight
  horizontal: element.scrollLeft // Horizontal scroll insight
};


Did somebody ask for scroll percentages? No worries:

//! Here it is, your scroll position as a percentage! 
const scrollPercentage = (element.scrollTop / (element.scrollHeight - element.clientHeight)) * 100;


Full-page Scroll Insights

For full-page scrolling, you might have to juggle between document.documentElement and document.body like a circus artist, thanks to different browser behaviours:

const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;


Interactive Applications with Scroll Events

For bolder application interfaces, you can add an event listener to the scroll event:

window.addEventListener('scroll', () => {
  console.log(window.scrollY); // Rolling in the deep 🎶
});


This opens a world of possibilities where you can react to the scroll position to create parallax effects, load more content dynamically, or even conceal and reveal elements based on the scroll position.

The Ninja API for Scroll Observations - Intersection Observer API

Want to make your application scroll-ceptional? Enter the Intersection Observer API. It allows you to observe changes in how much of your target element is visible and run performance-friendly callbacks:

const observer = new Intersection Observer(yourCallbackHere);
observer.observe(document.querySelector('.to-observe'));


You can use it to implement lazy loading, infinite scrolling, or visibility-based animations. Just remember, with great power comes...great scroll handling!

Titbits for Scroll Position Mastery

Reaching the Scroll End

Just like you'd want to know if you've reached the rooftop party in your elevator, here's how to see if a user reached the bottom of your content:

// Reached the very bottom, eh?
const atBottom = element.scrollHeight - element.scrollTop === element.clientHeight;


Checking Scrollbar Visibility

Need a glance if the scrollbar showed up to your party? Here's your peephole:

// Put on your glasses 
const hasScrollbar = element.scrollHeight > element.clientHeight;


Essential Scroll Helpers

JavaScript, the good boy scout, has handy-built methods for scrolling:

// Bring 'em into view, nice and smooth!
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
