Intersection Observer & Efficient Scroll Handling

What is the best way to handle scroll-based progress indicators?

const progressObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const progress = Math.round(entry.intersectionRatio * 100);
    updateProgressBar(progress);
  });
}, {
  threshold: Array.from({ length: 101 }, (_, i) => i / 100)
});

progressObserver.observe(document.querySelector('article'));

Calculate scroll percentage manually
Use scroll event with throttling
Use Intersection Observer with multiple thresholds
Using Intersection Observer with multiple thresholds is the most efficient way to implement scroll-based progress indicators because: 1) It provides precise progress tracking without the overhead of scroll events, 2) intersectionRatio directly corresponds to the visible percentage of the element, 3) The browser optimizes intersection calculations, reducing performance impact, 4) It works reliably across different devices and screen sizes. The code shows how to create 101 thresholds for smooth 1% increments in progress tracking.
Track scroll position with setInterval

Next Question (12/20)