Intersection Observer

The Intersection Observer is a Web API. It enables a callback to be executed whenever a target element starts or stops intersecting with the root (the viewport or another specified element). Scroll the sandbox below to trigger callback.

const target = document.querySelector('#target')

const options = {
  rootMargin: '0px',
  threshold: 1,
};

function callback(entries, observer) {
  const { isIntersecting } = entries[0];
  console.clear()
  console.log(`Is element 100% visible: ${isIntersecting}`)
}

const observer = new IntersectionObserver(callback, options);
observer.observe(target);

• Source

Options

When creating an observer, new IntersectionObserver(callback, options), an options object is required. It has 3 properties:

const options = {
    root: null,
    rootMargin: '0px',
    threshold: 1,
};

root

This can be set to:

• ▪ the browser's viewport by setting a value of null (or omitting the property) or
• ▪ an ancestor element of the target element.

rootMargin

A value that grows or shrinks the root's intersection area. It accepts values similar to the CSS margin property. Example: 32px 16px. Accepts pixels or percentages.

const options = {
    rootMargin: "-48px 0",
    threshold: 1,
}

threshold

The percent of the target needed to intersect the root required to execute the callback. Represented as a value between 0 & 1. A value of 0.2 means when 20% of the target starts intersecting the root, the callback is executed. It will also execute when the target transitions from having more than 20% intersection to less than 20%.

const options = {
    rootMargin: "-48px 0",
    threshold: 0.2,
}

A threshold value of 0 means the callback will execute when 1px of the target intersects. It can also be set to an array of numbers. Example: [0.2, 0.4, 0.6, 0.8]

Callback

The callback is executed when:

• ▪ when a target is initially passed to the observer: observer.observe(target), or
• ▪ a target starts (or stops) intersecting the root.

It receives 2 arguments:

• ▪ entries: a list of IntersectionObserverEntry for each target which reported a change in its intersection status.
• ▪ observer: the observer.

function callback(entries, observer) {
  entries.forEach((entry) => {
    const {
      boundingClientRect,
      intersectionRatio,
      intersectionRect,
      isIntersecting,
      rootBounds,
      target,
      time
    } = entry
  });
};

Performance

The callback is executed on the main thread. If it is expensive & could degrade the UX (User Experience) by blocking the browser, use requestIdleCallback.

Use Cases

• ▪ Dynamic Header
• ▪ Infinite Scroll
• ▪ Table of Contents
• ▪ Lazy-load content when scrolled into view
• ▪ Start / stop animations entering / leaving the viewport
• ▪ Reporting visibility of advertisements to calculate ad revenues
• ▪ Drag & Drop

Where to Next?

Notes
    
  │
  └── JavaScript
        
  │
  └── Web API
            
YOU ARE HERE
            
  │
  └── Intersection Observer
                
  │
  ├── Dynamic Header
                
  │
  ├── Infinite Scroll
                
  │
  └── Table of Contents