Intersection Observer & Efficient Scroll Handling

How can you optimize scroll performance in long lists or tables?

const listObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const row = entry.target;
      row.style.visibility = 'visible';
      if (row.dataset.src) {
        row.textContent = row.dataset.src;
        delete row.dataset.src;
      }
    } else {
      entry.target.style.visibility = 'hidden';
    }
  });
}, {
  rootMargin: '100px 0px'
});

Render all items at once
Use CSS visibility for off-screen items
Remove off-screen elements from DOM
Use virtual scrolling with Intersection Observer
Optimizing scroll performance in long lists can be achieved by: 1) Using Intersection Observer to manage visibility and content loading, 2) Implementing virtual scrolling by only rendering visible items, 3) Using CSS visibility for off-screen items to maintain layout, 4) Preloading content slightly before it's needed using rootMargin. The code demonstrates this approach by managing visibility and lazy loading content for list items, improving performance with large datasets.

Next Question (19/20)