Intersection Observer Options

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Intersection Observer Options

You can set three options for an Intersection Observer:

1. root
2. rootMargin
3. threshold

Root

root is the element you use to check if the observed elements are visible. It defaults to the browser window.

You can change root to any element. For example, you can set root to a scrollable element.

<div class="scrollable">
  <ul>
    <li class="red box"></li>
    <li class="orange box"></li>
    <li class="blue box"></li>
  </ul>
</div>

const options = {
  root: document.querySelector('.scrollable')
}

const callback = entries => {
  entries.forEach(entry => {
    console.log(entry)
  })
}

const observer = new IntersectionObserver(callback, options)

const boxes = document.querySelectorAll('.box')
boxes.forEach(box => observer.observe(box))

You might not need to change root

Here’s the interesting thing. If you create an Intersection Observer on the browser’s window, you can still observe elements inside a scrollable element.

Entries will be created when they appear.

const observer = new IntersectionObserver(callback)

const boxes = document.querySelectorAll('.box')
boxes.forEach(box => observer.observe(box))

So when will you change root?

You will only change root if you need to do something when these two things happen together:

1. You want to observe from a scrollable element.
2. You want to fine-tune when to log an entry with rootMargin

This brings us to rootMargin.

rootMargin

rootMargin lets you specify an offset amount from the edges of the root. By default, this amount is set to 0px. You can set it to a px or % value.

• Positive values: Expand the root outwards
• Negative values: Contract the root inwards

For example, let’s say you want to create entries only if an element has scrolled 150px into the viewport. You can set rootMargin to -150px.

<ul style="margin-top: 101vh">
  <li class="red box"></li>
  <li class="orange box"></li>
  <li class="blue box"></li>
</ul>

const callback = entries => {
  entries.forEach(entry => {
    console.log(entry)
  })
}

const observer = new IntersectionObserver(callback, {
  rootMargin: '-150px'
})

This is what you’ll see:

Precise control over each direction

You can specify rootMargin for top, right, bottom, and left directions. You do this with CSS’s margin shorthand.

// Sets all four sides to -150px
{ rootMargin: "-150px" }

// Sets top & bottom to -150px, left and right to -75px
{ rootMargin: "-150px -75px" }

// Sets top to -150px left and right to -75px, bottom to -50px
{ rootMargin: "-150px -75px -50px" }

// Sets top to -150px; right to -75px, bottom to -50px, left to -25px
{ rootMargin: "-150px -75px -50px -25px" }

Threshold

Threshold logs an entry when a specific % of the element is visible. It’s a number that ranges from 0 to 1.

• 0: Creates an entry when 0% mark of the observed element intersects the root. This is the default value.
• 1: Creates an entry when 100% of the observed element intersects the root.

Pay attention to the difference between threshold: 0 and threshold: 1.

• threshold:0:
  • Entry created when top of element reaches bottom of root
  • Entry created when bottom of element reaches top of root
• threshold: 1:
  • Entry created when bottom of element crosses bottom of root
  • Entry created when top of element crosses top of root

You can set threshold to an array. This creates an entry when the observed element crosses each threshold.

const observer = new IntersectionObserver(callback, {
  threshold: [0,1]
})

• threshold [0, 1]:
  • Entry created when top of element reaches bottom of root
  • Entry created when bottom of element reaches top of root
  • Entry created when bottom of element crosses bottom of root
  • Entry created when top of element crosses top of root

Entry properties

The remaining 2 entry properties would make sense now:

1. rootBounds: The root element’s boundingClientRect (which is determined by root and rootMargin.
2. intersectionRect Area where the boundingClientRect and rootBounds overlap.

Exercise

1. For rootMargin:
   1. Set rootMargin to the following values. Observe when entries trigger.
      1. 0px
      2. 150px
      3. -150px
2. For threshold
   1. Set threshold to the following values. Observe when entries trigger.
      1. 0
      2. 0.5
      3. 1
      4. [0, 1]
      5. [0, 0.5, 1]