SEP.15.2017
SOCIAL NETWORK SHARE :

Intersection Observerを学ぶ STUDY CASE: INTERSECTION OBSERVER

こんにちは、ディベロッパーの後藤です。
前々から気になっていたIntersection Observer APIについて調べてみました。

Intersection Observerとは

Intersection Observerとは表示領域と要素の交差を検出することができるAPIです。
今まではscrollTopやrequestAnimationFrameなどを用いて要素位置を検出して様々な処理を行なっていたのですが、スクロールの管理は過度にイベントが発火してしまうため、間引きなどを行い、パフォーマンスへの影響を極力抑える必要がありました。
Intersection Observerを使用することで要素位置の検出を行い、手軽にイベントの発火などを最小限に抑えることができます。
現在Intersection Observerは、IEとSafariを除くブラウザで利用することが可能です。

参考

Can I use Intersection Observer

https://caniuse.com/#search=IntersectionObserver

Intersection Observer 日本語訳(2017年9月1日付け編集者草案)

https://triple-underscore.github.io/IntersectionObserver-ja.html#dom-intersectionobserver

実装手順

Intersection Observerは下記実装で利用することができます。

//交差を検出したい子要素を取得
let target = document.querySelector('.child');
 //指定できるoption
let options = { 
 //交差の基準となる親要素を指定(初期値はdocument) 
 root: document.querySelector('.parent'),
 //要素を検出したいratioを0-1の間で指定が可能(初期値は0,1のみ)
 threshold: [0,0.5,1], 
 //交差の基準を指定した値で変更(初期値は0) 
 rootMargin: 100px
}
let observer = new intersectionObserver((changes) => {
 //交差を検出した際に呼ばれるコールバック
 console.log(changes[0])
},options);

//指定した要素をobserveに登録する
observer.observe(target);
//指定した要素のobserveを解除する
observer.unobserve(target);
//登録されている全ての要素のobserveを解除する
observer.disconnect();


コールバックで取得できる要素の情報

コールバックで取得できる情報は下記となります。

  • time : コールバックが発火した際のタイムスタンプ
  • rootBounds rootで指定した領域の画面表示上の相対位置
  • boundingClientRect 交差した要素の画面表示上の相対位置
  • intersectionRect 交差している領域の画面表示上の相対位置
  • intersectionRatio 交差した要素が領域に入っている比率
  • target 交差した要素
  • isIntersecting 交差しているかどうか

サンプル

いくつかIntersection Observerを使用して作ってみました。

トグルとして指定、取得

ratioの指定、取得

 

Intersection Observerの特徴

Intersection Observerを使っていくつかサンプルを作ってみたのですが、下記のような特徴がありました。

  • 表示 / 非表示で処理を行う場合の実装がとても楽
  • トグルを実装する際にも状態管理はisIntersectingのbooleanを利用することで行える
  • イベントの間引きを処理を行う必要がない
  • 表示領域と交差させたい要素は必ず親子関係である必要がある
  • パララックスのような表現はthresholdを利用しても実装できない
  • 破棄用の処理も用意されているので非同期での管理がしやすい

 

いまはまだ利用できないブラウザがあるためすぐに使用することはできませんが、スクロールによるパフォーマンスには悩むことが多いので、今後も最適な方法を探していきたいと思います。

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.

 SEP.15.2017
SOCIAL NETWORK SHARE :