← All Tools

IntersectionObserver Builder & Playground

Compose an IntersectionObserver with custom rootMargin and threshold list, scroll a live target through the viewport box, and watch each IntersectionObserverEntry fire in real time. Copy the snippet for lazy-loading, infinite scroll, scrollspy, or sticky-on-pin patterns.

A null root uses the viewport. Setting a scrollable element scopes intersection to that element.
Positive values grow the root box (fire earlier); negative shrink it. Accepts px or %.
Callback fires when intersectionRatio crosses any listed value. Empty defaults to 0.
Preview
Code
↑ scroll up · spacer
spacer
Target element
ratio: 0.00 · isIntersecting: false
spacer
↓ scroll down · spacer
root margin boxintersectingpartial
fires 0 last ratio 0.00 isIntersecting false 

        

          
        

      

    

  






  
Notes

  

    
    
      
  • The browser delivers entries asynchronously — never assume the callback fires synchronously on observe.
    • 
      
  • An entry always fires at least once after .observe() with the current intersection state.
    • 
      
  • rootMargin with a % unit is resolved relative to the root's box (the viewport, when root is null).
    • 
      
  • Negative bottom margin (e.g. 0px 0px -50% 0px) is the classic "fire when the element crosses the middle" trick used by scrollspy.
    • 
      
  • threshold: 1 fires only when the target is fully inside the root box — if the target is taller than the root, that never happens.
    •