From the days of IE9 or the early versions of Chrome, people were able to do all kinds of cool things on the Web:
- Lazy-load images.
- Automatically play / pause video when user scrolls to / from the video.
- Animate-on-scroll on the landing page.
- Support infinite-scrolling so that users can scroll forever without having to click on the pagination.
Key to these features is the “duo”: onscroll event and Element.getBoundingClientRect() ! One to detect the moment the user scrolls the page, the other to indicate the element’s position on the page.
But this one has one big minus : performance ! Browsers now have “smooth scrolling”, along with smartphones that enable touch swiping, making event onscroll forced to be triggered a lot. With just one scroll, the browser can have up to 60+ event onscroll . Along with that, Element.getBoundingClientRect() must execute completely synchronously, and must call to calculate the position for each element with each on onscroll event.
After years of advancement in the Web world, is this still the best solution?
An introduction to the Intersection Observer API
Given a name that sounds very “dangerous”, you can actually understand the Intersection Observer API very simply:
The Intersection Observer API helps you to take an action when any element you want is “scrolled” by the user.
This API was created correctly to replace the old check with onscroll and Element.getBoundingClientRect() . It’s worth mentioning here, this is a completely asynchronous API. Checking if the elements intersect is not entirely manageable and optimized by the browser, and especially this is handled outside the main thread. Because it is run on an independent thread, the Intersection Observer API provides excellent performance , and never slows down your website.
Compatibility
You don’t have to worry about compatibility unless you have to support Internet Explorer, because the Intersection Observer API is 100% supported by modern browsers .
Use
Concepts you need to know
The target element refers to the element you are looking for to test for the intersection (eg an image element).
The root element is usually a parent of the target and is scrollable. But in 99% of cases you will want to track the intersection of your target with the viewport (the display area of the Web page in the browser). If you want to do this, set null as the root element.
The intersection ratio is the ratio at which the target and root intersect. This is a decimal number from 0 to 1. When the 2 elements do not intersect, the intersection ratio will be 0. When the target shows only half, the ratio will be 0.5. And finally, if the target is completely in root , the ratio will be 1.
And the threshold number is the intersection ratio required for the callback to be called. By default, the threshold will be set to 0. That is, only a small amount of the element enters the viewport OR when the element completely disappears from the viewport, the callback will be called.
Let’s try the Intersection Observer API
Getting started with Intersection Observer is extremely simple like this.
First, you instantiate an IntersectionObserver object:
1 2 3 4 5 6 | <span class="token keyword">const</span> observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">IntersectionObserver</span> <span class="token punctuation">(</span> callback <span class="token punctuation">,</span> <span class="token punctuation">{</span> root <span class="token operator">:</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> rootMargin <span class="token operator">:</span> <span class="token string">'0px'</span> <span class="token punctuation">,</span> threshold <span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
Or more simply:
1 2 | <span class="token keyword">const</span> observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">IntersectionObserver</span> <span class="token punctuation">(</span> callback <span class="token punctuation">)</span> |
When some tracked element passes the threshold , the callback will be called:
1 2 3 4 5 6 7 | <span class="token keyword">let</span> <span class="token function-variable function">callback</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">entries <span class="token punctuation">,</span> observer</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> entries <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> <span class="token parameter">entry</span> <span class="token operator">=></span> <span class="token punctuation">{</span> entry <span class="token punctuation">.</span> intersectionRatio <span class="token comment">// từ 0 đến 1</span> entry <span class="token punctuation">.</span> target <span class="token comment">// HTMLElement</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Finally, to start tracking, you need to pass the created observer above the elements to track:
1 2 3 | <span class="token keyword">const</span> target <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">querySelector</span> <span class="token punctuation">(</span> <span class="token string">'#elem'</span> <span class="token punctuation">)</span> observer <span class="token punctuation">.</span> <span class="token function">observe</span> <span class="token punctuation">(</span> target <span class="token punctuation">)</span> |
Simple example
Below is an example using the Intersection Observer API to change the background color of elements with a threshold of 1:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token keyword">const</span> observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">IntersectionObserver</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">entries <span class="token punctuation">,</span> observer</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> entries <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> <span class="token parameter">entry</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> entry <span class="token punctuation">.</span> intersectionRatio <span class="token operator">===</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> entry <span class="token punctuation">.</span> target <span class="token punctuation">.</span> classList <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token string">'bg-blue-600'</span> <span class="token punctuation">)</span> entry <span class="token punctuation">.</span> target <span class="token punctuation">.</span> classList <span class="token punctuation">.</span> <span class="token function">remove</span> <span class="token punctuation">(</span> <span class="token string">'bg-gray-200'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> entry <span class="token punctuation">.</span> target <span class="token punctuation">.</span> classList <span class="token punctuation">.</span> <span class="token function">remove</span> <span class="token punctuation">(</span> <span class="token string">'bg-blue-600'</span> <span class="token punctuation">)</span> entry <span class="token punctuation">.</span> target <span class="token punctuation">.</span> classList <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token string">'bg-gray-200'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> threshold <span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> elements <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">querySelectorAll</span> <span class="token punctuation">(</span> <span class="token string">'.item'</span> <span class="token punctuation">)</span> elements <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> <span class="token parameter">element</span> <span class="token operator">=></span> <span class="token punctuation">{</span> observer <span class="token punctuation">.</span> <span class="token function">observe</span> <span class="token punctuation">(</span> element <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
Where to learn more?
Reading the documentation on the Intersection Observer API on MDN is the best way to get deeper into this API.
Also, if you need to do common features like lazy-load or animate-on-scroll, you may already have nifty libraries that make use of this API (and there’s always a fallback on Element.getBoundingClientRect() when (necessary) as Sal or lazyload .
Vue and React also have wrapper libraries of this API ( react-intersection-observer and vue-intersect ) to make it easier for you to use Intersection Observer.