JavaScript onScroll Event Tutorial

The JavaScript onScroll event is a powerful way to respond to user interactions as they scroll through a webpage. You can use it to create sticky headers, infinite scroll, reveal animations, lazy loading images, and much more.

In this tutorial, you’ll learn:

• What the onScroll event is
• How to use it with JavaScript
• Practical use cases
• Performance tips

What is the onScroll Event?

The onScroll event fires whenever a scrollable element (like the window, a div, or any container with overflow: scroll) is scrolled.

element.onscroll = function() {
  // Do something on scroll
};

element.addEventListener("scroll", function () {
  // Code to run on scroll
});

Example 1: Scroll Event on the Window

<script>>
  window.addEventListener("scroll", function () {
    console.log("You scrolled! Current Y offset:", window.scrollY);
  });
</script>

✅ This logs how far the user has scrolled from the top.

Example 2: Scroll Inside a div

<div id="scrollBox" style="height: 100px; overflow-y: scroll;">
  <p>Content...</p>
  <p>More content...</p>
  <p>Even more content...</p>
</div>

<script>
  const box = document.getElementById("scrollBox");
  box.addEventListener("scroll", function () {
    console.log("Box scrolled to:", box.scrollTop);
  });
</script>

✅ scrollTop tells you how far the element is scrolled vertically.

Use Cases for onScroll

1. Sticky Header - Make a header stick to the top once the user scrolls past it.
2. Reveal Elements on Scroll - Animate elements as they come into view.
3. Back to Top Button - Show a button when the user scrolls down.
4. Infinite Scroll - Load more data when the user reaches the bottom of the page.

Example 3: Back to Top Button

<button> id="backToTop" style="display:none;">↑ Top</button>

<script>>
  window.addEventListener("scroll", function () {
    document.getElementById("backToTop").style.display = 
      window.scrollY > 300 ? "block" : "none";
  });

  document.getElementById("backToTop").onclick = function () {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
</script>

✅ A handy feature for blogs and long pages.

Performance Tips

• Throttle or debounce scroll events. Scroll fires many times per second, which can slow down your page.
• Use requestAnimationFrame() or libraries like Lodash (_.throttle) to control how often your scroll handler runs.

Example Throttling with setTimeout

let isScrolling;

window.addEventListener("scroll", function () {
  window.clearTimeout(isScrolling);
  
  isScrolling = setTimeout(function () {
    console.log("Scrolling stopped.");
  }, 200);
});

Common Properties in Scroll Events

Property	Description
window.scrollY	Vertical scroll offset
element.scrollTop	Scroll position inside element
scrollHeight	Total height of scrollable content
clientHeight	Visible height of element

Detect When User Reaches Bottom

window.addEventListener("scroll", function () {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    console.log("You've reached the bottom!");
  }
});

Perfect for infinite scroll or lazy loading.

Best Practices

• Always optimize scroll events to prevent lag
• Only add scroll listeners to scrollable elements
• Clean up listeners if dynamically added
• Use Intersection Observer for more efficient alternatives

Conclusion

JavaScript onScroll events open up a world of interactive features on your website. From simple visual effects to powerful UX enhancements like infinite scroll, it’s a must-know for any frontend developer.