Learn to Code via Tutorials on Repl.it

← Back to all posts
5
JavaScript's Intersection Observers
eankeen (528)

JavaScript's Intersection Observers

JavaScript's intersection observers are pretty cool. They let you test if some DOM element is intersecting another DOM element.

Concept

There are two words you might want to know when dealing with Intersection Observers. The root element and the target element. I think it's easiest to show you the difference:

First example:

Second example:

As you may have concluded, you usually want the target element to be a descendent of the root element. And the root element can be another DOM element, or the browser's viewport. You can think of the root element as "watching" to see if any child elements are intersecting it.

For the second example, your code might look like the following

<body>
    <div id="root-element">
        <div id="target-element"></div>
    </div>
</body>

The root element must be an ancestor of the target element. So, you cannot have something that looks like the following

<!-- you cannot use intersection observers with this html -->
<body>
    <div id="root-element"></div>
    <div id="target-element"></div>
</body>

Creating the Intersection Observer

Here is an example (I'll break it down step by step right underneath).

let player = document.getElementById("player");

let options = {
    root: document.getElementById("main"),
    threshold: 0 // when 50% of the target element is inside of the root element, that is when the callback fires
};

let callback = function(entries, observer) {
    console.log(`The target element is intersecting with the root element. The threshhold ratio is ${options.threshold}.`)
};

let observer = new IntersectionObserver(callback, options);

// The root element is observing one element (player)
observer.observe(player);

To create new Intersection Observer (observer), you must specify two things

  • callback, the function to invoke when your elements intersect
  • options, some options to change the behavior of the Intersection Observer

After you create the Intersection Observer, you can then observe any other elements you want. In the example above, I am only observing the player element. (observer.observe(player))

Options

When creating your Intersection Observer options, you can specify what the root object is and the threshold. (see MDN for more properties you can add)

let options = {
    root: null
    threshold: .5 // when 50% of the target element is inside of the root element, that is when the callback fires
};
  • If the root property is null, then your root element is the viewport (like in the first visual example I showed).
  • When creating the threshold, as yourself this question: "How much do I want the target element to be inside the root element for the callback function to execute?"

Thresholds

The following shows a threshold of 0. 0% of the target element is inside the root element. So in this case, 0% of the target element must be in the root element for the callback function to execute.

The following shows a threshold of .5. 50% of the target element is inside the root element. In this case, 50% of the target element must be in the root element for the callback function to execute.

The following shows a threshold of 1. 100% of the target element is inside the root element. And in this case, 100% of the target element must be in the root element for the callback function to execute.

Callback

The callback function executes every time an intersection occurs. From here you have access to two variables: entries and observer.

let callback = function(entries, observer) {
    console.log(`The target element is intersecting with the root element. The threshhold ratio is ${options.threshold}.`)
};
  • entries gives you an array of the DOM elements you are observing. However, note that each array element is an IntersectionObserverEntry. From this object, you can extract where the DOM element is, or how much the DOM elements are intersecting. Learn more about IntersectionObserverEntrys on the MDN Docs.

If you want to check out some example of using IntersectionObservers, I have a repl here that uses the viewport as the root element and another one that uses a DOM element as the root element. The latter is interactive, so you can move the squares around with the 'wasd' keys.

I hope this tutorial was useful! Let me know what you think and post a comment!