What is Intersection Observer?
Turkish: Intersection Observer
Intersection Observer is a browser API that asynchronously detects when an element enters or leaves the viewport or a chosen container.
What Is Intersection Observer?
Intersection Observer is a browser API that asynchronously watches whether an HTML element intersects with the viewport or a chosen container. Older implementations often listened to scroll events and recalculated element positions on every scroll, which could add unnecessary work on the main thread.
The API takes a callback and options for the observed element. root defines the reference container, rootMargin expands or shrinks the boundary, and threshold controls at what visibility ratio the callback runs. When an element becomes visible, a page can load an image, start an animation, or append more records to an infinite list.
Common Uses
Lazy loading, infinite scroll, ad viewability, reading analytics, and scroll-based animations are common use cases. For example, delaying product-card images until they are close to the viewport can reduce mobile data use and initial load time.
Performance Notes
Intersection Observer reduces the need for manual calculations during every scroll event, but heavy work inside the callback can still hurt performance. On large lists, observer count, image size, and the performance budget should be considered together. CPU-heavy work may belong in a web worker.