How to Use The JavaScript Intersection Observer API
Written by Kolade Chris | Sep 21, 2024 | #JavaScript #WebDev | 5 minutes Read
In simple terms, the JavaScript intersection observer API is a tool that lets you know when an element on a webpage is visible on the screen.
The API makes it easy to detect when elements enter or leave the viewport, removing the need for complex scroll event handling. This allows developers to execute actions based on the visibility of elements within the viewport.
The said actions include lazy-loading images, implementing infinite scrolling, or triggering animations when elements become visible.
Keep reading as I walk you through the syntax of the Intersection Observer API and share three examples to help you start using it in your projects.
Basic Syntax of the Intersection Observer API
Below is the basic syntax of the intersection observer API:
Let’s look at each of the items in the syntax:
InterSectionObserver()
is the API itself. It’s a constructor, so you need to initialize it with thenew
keyword. It takes two parameters – a callback function and an optionaloptions
object.callbackFunc
is the callback function is the function that will be called whenever the observed element enters or exits the viewportobserverOptions
is an object that allows you to specify the root element for observing, margins around the root, and visibility thresholds to trigger the callback.observerVariable
is the constant you have to assign the instance of theIntersectionObserver
constructor to. It’s an identifier (a name), so you can call it whatever you want.observerVariable.observe(targetElement)
is the line that will finally do the slam dunk with theobserve()
method. ThetargetElement
is the element you want to do something with.
Let’s look at 3 examples of the ways you can use the intersection observer API:
- the first example will focus on observing a single element and using the basic syntax as is
- the second will observe one element too but make the syntax clearer
- the third will show you how to observe multiple elements without defining separate observers for them
Example 1: Using the Intersection Observer API to Observe a Single Element
Let’s observe the h1
element in the HTML code below:
Here’s the CSS for the HTML:
To start observing the h1
element, you need to reference it with querySelector
[or your favourite method of doing so].
I’ll do that by targeting the .heading
class of the h1
:
The next thing to do is to create a new instance of the intersection observer API and pass in the callback and the options.
I’ll start by defining an observerh1
variable set to a new instance of IntersectionObserver()
. I will also start observing the h1
element straight away:
For the callback, I’m going to start with an entries
parameter for an arrow function, I’ll also log the entries parameter to the console:
You can see that the target is indeed the h1
element with the class heading
.
There’s also an isIntersecting
property you can use to check if the target element is in the viewport.
Let’s loop through the entries (only h1
for now, actually) and do something using the isIntersecting
property based on whether the h1
is in the viewport or not:
Here’s the result:
Isn’t that what we all call “cool”?
You can take things further and assign some style to the target element once it’s in the viewport:
For the optional options object, I’ll pass in the following:
Don’t be confused. Here’s what those mean:
- a
root
ofnull
means the observer will use the entire browser viewport as the area to watch for visibility changes - a
rootMargin
of200px
means the observer will add an extra200px
around the root area (the entire browser viewport for this example) , so elements will be considered visible even when they are still 200 pixels outside the root - a
threshold
of0.5
means 50% of the element needs to be visible before the observer callback will be triggered
This is what things look like now:
In case you’re doubting it, things really do change if you inspect the h1
element:
Example 2: Defining the Callback and Options Outside of the IntersectionObserver
Constructor
You don’t have to fill up the IntersectionObserver
constructor with the callback function and options parameters. You can define both outside and reference them inside the constructor.
To show you how to do this, let’s observe the box inside the HTML code. Here’s the fully commented code that shows you what’s going on:
Here’s what’s happening to the box now:
Pardon the interruption
Join my Free Newsletter
Subscribe to my newsletter for coding tips, videos from reputable sources, articles from OG tech authors, and a ton of other goodies.
No BS. No fluff. Just pure software development goodies on a Sunday every week.
Back to the intersection observer API
Example 3: How to Observe Multiple Elements with the IntersectionObserver API
Observing multiple element with the IntersectionObserver
API works a bit differently.
To do that, you need to do these:
- select your elements from the HTML with
querySelectorAll()
or other relevant methods - define your callback and options as usual
- supply the callback and the options parameters into the
IntersectionObserver
API constructor - loop through the target elements with
forEach
and observe them inside it
Here’s how I was able to observe the circle and box on the page:
Here are the box and the circle intersecting:
You can see that in the second and third examples, the animation is only triggered once the user scrolls to them. This can be useful when you’re dealing with expensive animations or other processes.
The Intersection Observer API improves user experience by ensuring elements load and animate only when needed, reducing unnecessary processing and enhancing performance. It’s an excellent tool for creating responsive, efficient, and engaging web interactions.
Start using the IntersectionObserver
API in your projects now!