What is rootMargin in IntersectionObserver for infinite scroll?
rootMargin defines a margin around the root (viewport) for the intersection check. Setting rootMargin: '100px' triggers the callback when the sentinel is 100px below the viewport, pre-loading data before the user reaches the bottom. This makes scrolling smoother.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Build Infinite Scroll in an Interview
Use IntersectionObserver on a sentinel element at the bottom of the list. When the sentinel is visible, fetch more data and append. Use loading and hasMore flags to prevent duplicate loads and stop when done. Use rootMargin for pre-loading.
IntersectionObserver is more efficient. Scroll events fire on every pixel of scroll, causing performance issues. IntersectionObserver only fires when the target enters or leaves the viewport, with no manual calculations needed.
Use a loading flag: if (loading || !hasMore) return. Set loading to true before fetching, and false after. This prevents multiple simultaneous fetches when the sentinel is visible.
Still have questions?
Browse all our FAQs or reach out to our support team