Hello everyone. My name is Goto and I am a developer.
Today I would like to show my research about IntersectionObserver API which I have been interested in for a while.

What is Intersection Observer?

Intersection Observer calculates how much of a target element overlaps the visible portion of the page (viewport) easier than the conventional method we have been using. Before Intersection Observer, you would have to detect which elements are visible within the current viewport’s boundaries, and then manually reduce the impact caused by events triggered by scrolls. Now with Intersection Observer, you can do these things with ease.
Currently Intersection  Observer can be used on any browsers except for IE and safari.

Reference:
Can I Use Intersection Observer
https://caniuse.com/#search=IntersectionObserver

Intersection Observer Japanese ver. (1 Sep, 2017 draft)
https://triple-underscore.github.io/IntersectionObserver-ja.html#dom-intersectionobserver

How to Use Intersection Observer API

Intersection Observer can be used as shown below;

//Select the child element to observe
let target = document.querySelector('.child');
 //Select option
let options = { 
 //Select the parent element (default: document) 
 root: document.querySelector('.parent'),
 //Select ratio between 0-1(default: 0,1)
 threshold: [0,0.5,1], 
 //How much to shrink or expand the root’s logical size (default: 0) 
 rootMargin: 100px
}
let observer = new intersectionObserver((changes) => {
 //Callback that is received when detect an intersection
 console.log(changes[0])
},options);

//Enter the selected element onto observe
observer.observe(target);
//unlock observe for the selected element
observer.unobserve(target);
//unlock observe for all the selected elements
observer.disconnect();

The Information You Get When The Callback Function Is Fired

Here is the list of the information you receive when a callback function is excused;

• time : timestamp that is created whenever a callback is fired
• rootBounds : the relative position of the targeted area positioned with an interaction root
• boundingClientRect :  the relative position of the intersected element
• intersectionRect : the relative position of the intersection on the viewport.
• intersectionRatio :  the ratio of the visible element
• target : the element in the intersection
• isIntersecting : whether an element and an viewpoint intersec

Demos

I have created a couple of samples using Intersection Observer.

The operation for when the element is in the viewport and when isn’t:

Change the operation depending on the assigned ratio:

My Review On Intersection Observer

I found these traits with IntersectionObserver after creating some samples.

• Very easy to implement it regardless of actual on-screen visibility.
• Observers can use boolean value when implement toggle functionality.
• It allows observers to eliminate rendering excess events.
• A viewport and an element must be in parent-child relationship in order for them to intersect.
• Effect like parallax cannot be implemented even with using threshold.
• Easy to control asynchronously as it has a scrap option.

Some browsers do not support Intersection Observer yet, so unfortunately it isn’t realistic to use it on daily basis at this stage.  But I will continue looking for better tools to use to reduce performance problems triggered by scrolling.