Introduction to the Intersection Observer JavaScript API

Intersection Observer is a JavaScript API that we can use to do a lot of really useful things that we used to have to rely on scroll event listeners for. Instead of firing off over and over and over again on tons of items, they sit there and wait for their target intersect with the page before firing.

We can use them to watch for when things enter or leave the viewport, and we can play with the options to change how much of the item has entered (the threshold), or how far into the page it is (the rootMargin).

In this video we're exploring the fundamentals of how they work so that in the following weeks we can start having fun with them!

This video was sponsored by Skillshare.

#javascript #intersectionobserver

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[A_Lesser_Man]

this is what i did with what you just taught me! thanks, Kevin!

HTML file:
<script
<div id=test>test</div>
<script>
function action(entry) {
entry.target.innerHTML = "YAHOO!";
}


const options = {
root: null, // null = viewport, default
threshold: 0, // 0 means fire observer if any bit of element enters container and 1 means if all of element is within container (may use 0.25, etc)
rootMargin: "0px" // some arbitrary number...
};


const blah = newObserver("#test", options, action);
</script>


javascript file:

function newObserver(selector, options, entryAction, unobserve, DEBUG) {
const element =
const observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
if (DEBUG) { console.log(entry.target); }


// some user created function to call to do shit to the entry
if (entryAction) { entryAction(entry); }


if (unobserve) { }
}
});
}, options);


observer.observe(element);
}

[anawhite]

Thank you so much! One new thing I learned today after watching this video: unobserve() will stop observing a specified element, while disconnect() will stop observing all of them.

[jesseearley]

Thank you for this straightforward and easy to understand video. This allowed me to accomplish EXACTLY what I've been trying to figure out how to do, which in my case was perform some simple animation for elements as the user scrolled down the page.

[bobmarteal]

Kevin, the amount of content you pick for each video is perfect. Much more than what you covered would swamp people. Great example and explanation.

[stefanallchorne]

This video is so good. Came at the perfect time. Thanks Kevin!!

[MrAnmoltiwari]

This is extraordinary to be honest. The way you explain it is just so easy on the brain!

[dan]

This finally simplified everything after an afternoon of trying to work out intersection observer by reading. Amazing.

[jenso]

I haven't even watched much of the video yet and I already know it's gonna be great. Thanks so much for everything you post, I finally got a job in web dev and my company uses intersection observer API, so here I am!

[VideoNOLA]

Definitely helpful for reinitializing SVG animations when the scroll into view, especially is you included a <script> block with an embedded background-image SVG using CSS, which otherwise sandboxes them from the containing DOM!

[annasognosia]

Kevin is a pleasure to listen to. I'm grateful to anyone who posts any level of understanding but Kevin makes it easier by explaining how it works.

[frankdrolet]

2 years later, this video is still the best out there to explain this, thanks a lot!

[airlobster]

Didn't know such thing even existed! I went straight away to add it to a grid-based table control (tabular data view, sortable columns, expandable rows, selections, sticky headers...) I'm writing these days. works great. thanks for that :)

[lawrenlelko]

It seems that this could add credibility to a portfolio page. THANK-YOU!

[gergopeto]

Kevin! I love your videos. You are the best source on youtube what I found regarding to front end dev

[chrisallen]

Extremely clear and helpful video. I'm going to use the intersectionObserver from here on out for work. No more annoying scroll listeners!!

[jacobbannier]

Starts at 02:50// Just watched the video, really clear and easy to follow. Thanks :)

[FreeHindiAdvice]

One of the best video to understand Intersection observer. Thank you Kevin :) :) :)

[walidali]

you are a great developer man, thank you so much for all of your work

[ajmaljoiya]

Sir your explanation has boosted my knowledge about Intersection observer
Thanks a lot

[wwt]

This is awesome. Can't wait for all of the series!!! For beginners you might want to mention that you need to npm i intersection-observer