Preamble
Have you ever heard of intersection observer or used it in javascript. If not, in this article I will introduce to you what is the intersection observer and what purpose to use it for. Come on, let’s find out.
For example
With the Intersection Observer, we can listen for a change in an element in the viewport.
If you do not understand what this function is for, let me come to the specific example below. For example, you want to lazyload the image only when the scroll bar scrolls to the area where the image is not available. You can do this by listening for the scroll event and checking if the image is already in the viewport to load the image.
Steps to take
The steps to perform are also very simple: – Create an Intersection Observer. – Attach element to listen for events.
1. Create the Intersection Observer:
The first is to create the Intersection Observer by:
1 2 3 4 5 6 7 8 9 10 11 12 | function handler(entries, observer) { console.log(entries); } const config = { root: null, rootMargin: '0px', threshold: 1.0 }; const observer = new IntersectionObserver(handler, config); |
Here I explain a little bit about the config.
- root: The parent element of the element to be listened to. Here I set it to null which means the parent is the document.
- rootMargin: Margin will be added to root.
- threshold: This section will limit the level of the callback callback. Its value is in the range of 0 – 1. Or it could be an array. Example: +
1: Callback will be called when the element shows 100% on viewport. +0: Callback will be called as soon as the element has just displayed 1px on the viewport. And this is also the default value if I do not configure. +0.5: Similar to the values on the callback that will be called when the element shows 50% of the viewport. +[0, 0.5, 1]: Callback will be called 3 times when the element is visible 1px, 50% and 100% on viewport.
In the callback handler function, the entries parameter is the array of elements to be listened to if they change. These entries also have additional drugs available to check the appearance of that element:
- entry.boundingClientRect
- entry.intersectionRatio
- entry.intersectionRect
- entry.isIntersecting
- entry.rootBounds
- entry.target
- entry.time
2. Attach the element to the Intersection Observer object:
For example:
1 2 3 4 | const image = document.getElementById('content_image'); observer.observe(image); |
After listening for the event for the element image, the callback will be executed immediately even if it is not in the viewport. And then it will be called again when the element is displayed in the viewport.
Also we can listen for multiple elements at the same time with the same observer object.
1 2 3 4 5 6 | const images = document.querySelectorAll('.image'); images.forEach(image => { observer.observe(image); }); |
3. How to cancel observer:
When we do not want to listen anymore, we can use the following methods
observer.unobserver(element);to cancel listening for a previously listened element.observer.disconnect();to cancel listening for all elements.
4. Practice
Come to practice about any intersection observer. For example we want to automatically play the video when we scroll to the video and pause when we scroll through that video.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const video = document.getElementById('video'); function handler(entries) { const videoEntry = entries[0]; // we have only one entry if(videoEntry.isIntersecting) { video.play(); } else { video.pause(); } } const observer = new IntersectionObserver(handler, ); observer.observe(video); |
This time we don’t need config because we only need the default location.
summary
So I have introduced to you about the effects of Intersection Observer, hope it can be of help to you. I wish you effective work and study