Skip to main content Accessibility Feedback

The Intersection Observer API

How to watch elements and run code when they enter or leave the viewport.

Learn the ins-and-outs of the Intersection Observer API with vanilla JavaScript in less than an hour.

This guide is shorter than a course but longer than a blog post. Get the most out of modern JavaScript and the native Web Platform.

Taught to developers at companies like...

What you’ll learn

  • How to create new IntersectionObserver object.
  • How to detect when elements enter or leave the viewport.
  • How to access details about an intersecting element, and manipulate it in the DOM.
  • How to stop watching elements after they’ve entered or left the viewport.
  • How to configure the IntersectionObserver object to detect elements before they enter the viewport, or when they’re only partially visible.

🧠 Multiple formats for different learning styles. All lessons include streaming HD videos (with captions) and downloadable text in ebook formats. Watch or read on any device.

Loved your book, it's become a daily reference for me. Fantastic stuff!- Chris Baughman

A Sample Lesson

How to detect when an element enters or leaves the viewport and run code in response.

BONUS: Don't go it alone! Upgrade to the Complete Set and get exclusive Slack access.

Upgrade to the Complete Set of guides and you'll also get exclusive access to my private Slack team, where you can chat with other students, get feedback on code, ask questions, and share the latest tips, tricks, and strategies for going vanilla JavaScript.

This is not available for sale at any price, and my students regularly tell me it's one of the most valuable things that comes with the guides.

Start learning now →

Having your interaction is priceless. Such added value.- Elliott Porter

Get the most out of modern JavaScript

  • Learn modern best practices and code patterns.
  • Spend less time Googling and more time working on cool stuff.
  • Get the skills and confidence to really understand JavaScript.
  • Explore new native features of the Web Platform.

Your 100% Money-Back Guarantee 💰

Don’t put off learning vanilla JavaScript! If you’re not 100% satisfied with these short tutorials, let me know and I’ll give you a full refund.

Hi, I'm Chris Ferdinandi. 👋

Chris Ferdinandi

I help people learn vanilla JavaScript, and I believe there’s a simpler, more resilient way to make things for the web.

I’ve taught developers at organizations like Salesforce and the Boston Globe, and my JavaScript libraries have been used by organizations like Apple and Harvard Business School. My developer tips newsletter is read by over 14k developers each weekday.

I want to help you master vanilla JavaScript, without all of the painful false starts and roadblocks I encountered when I was learning.

Ready to buy?

Get everything you need to start using Proxies with vanilla JavaScript:

  • All of the Lessons (in ebook format and streaming HD video)
  • The Source Code & Demos
  • FREE Updates for Life

Buy now for just $39

Want to save 30% and get exclusive Slack access? Get this guide as part of the Complete Set of Vanilla JS Shorts and save big!

I thank you from the bottom of my heart. If it had not been for you, I would not be able to learn JavaScript.- Patricia Parker
Wanting to learn JavaScript from scratch, make the transition from jQuery or some other library? Already pretty competent and just want to get better?

Chris Ferdinandi has got your back and his learning platform is a *tremendously good value*.- Jonathan Schofield
Clarity. Brevity. Unpretentious explanation. Care for best practices. Obvious attentiveness. Available to help "unstuck" students. You actually rock, Chris.- Kabolobari Benakole
Can you actually create a website without JS frameworks? Yes! Here's a collection of resources to get started.- Ed Rivas
We need more people like Chris, who not only have this mindset that we need to stick to the basics of JavaScript, but are willing to evangelize it.- David Walsh
As a front-ender I always found JS difficult and made the mistake "solving" my lack of knowledge with the use of jQuery and a lot of plugins.

When I stumbled over your site and watched the video I had the feeling that for the first time I had an insight how JS works and how to learn it.- Ruud van Zuidam
Shout out to Chris Ferdinandi's blog that keeps coming up whenever I google anything vanilla JS. Nice little tips every day.- Wes Bos
I recommend Chris Ferdinandi to all JavaScript learners :)- Alex Muraro

Frequently Asked Questions

Do the guides include new ES6 methods?

Yes. Where applicable, I cover new ES6 functions and browser APIs.

What happens if I buy a guide and you release an update? Do I get free updates?

Yes, you get free updates for life. You'll get an email letting you know whenever new content is available.

Do you offer any discounts?

Absolutely! There are three discount programs available:

  1. Student Discount. This applies to anyone in any type of schooling, including evening classes and coding bootcamps. Learn more about student discounts.
  2. Under-Represented Groups in Tech. I've had a lot of helping getting where I am, and I want to pay it forward. If you're a member of an under-represented group in tech, you can get special pricing. Learn more about discounts for under-represented groups in tech.
  3. Location-Based Pricing. I totally get that in some countries salaries and cost of living are such that the the guides are unaffordable. These should show up automatically at checkout, but if they don't, send me an email at, and I'll send you a discount to make it fair for where you live.
If I buy just one guide and love it, can I upgrade to the bundle?

Absolutely. Just send me an email at

I'll upgrade you to the bundle or format you want. You'll only have to pay the difference in price between what you purchased and the bundle or format you want.

How do I access my guides?

Visit and create an account with the email address you used to make your purchase.

You can download your guides in ebook format at any time, and stream your video courses from any device. You can also download the videos for offline viewing.

Do I need any special tools or equipment?

All you need to work with the source code and projects is a modern web browser and a text editor (I recommend VS Code). The pocket guides come in PDF, EPUB, MOBI, and HTML formats, so you can read it on any device you own. The videos can be streamed on any device.

Do I need any prior knowledge or experience to learn vanilla JavaScript?

Ideally you're comfortable working with HTML, CSS, and some JavaScript basics already. If you're brand new to JavaScript, you might want to start with my Vanilla JS Pocket Guides. If you have any specific questions, though, please email me at

Are there any rules or requirements around the Slack team?

Yes. You must be at least 18 years old, and read and agree to follow the Code of Conduct.

Do you have a return policy?

Absolutely! If you’re not 100% satisfied with the guides, email me at and I’ll give you a full refund.

I have another question.

No problem! Send me an email at

Start learning now →

God, you're amazing... I'm learning so much from you.- Mojtaba Seyedi, Front End Developer
Ever wanted to ditch jQuery but not sure how? This book by Chris Ferdinandi will set you on the right path.- Jeremy Green

Not ready yet? Get daily developer tips.

Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Join over 14k others.

If you have any questions about anything, feel free to send me an email at