Weblasts

Intersection Observerを使ったらスクロール系の処理が簡単になった件

今更『Intersection Observer』を知ってスクロール系の処理をやってみたら目からウロコがドバドバ出てきたので使い方をまとめてみます

こっちにもintersectionobserverを使ったものがあるので参考になればと思います

Intersection Observerとは

『Intersection Observer(交差オブザーバー)』は指定した範囲(root)に監視している対象の要素が入ってきたら(交差したら)その要素に対してはもちろんのこと色々と処理を実行できる仕組みです。

この方法を知るまではスクロールやリサイズを監視しスクロール量を取得し、処理したい要素の位置を取得して処理を実行するみたいにめんどくさいことを強いられていましたが、『Intersection Observer』を使うと簡潔に実行できます。

Intersection Observerの使い方

とりあえずコピペしていじれるようなひな形から

細かい事はこの下にコードを抜き出しつつ説明的なことを書いています

交差を監視する要素を準備

Intersection Observerで監視対象とする要素は『document.querySelectorAll()』で取得していきます
監視対象とする要素が単一の場合は「document.querySelector()」でも対応可能ですが、『document.querySelectorAll()』は監視対象となる要素が単一の場合でも対応できるのでこちらを使う方法がおすすめです

上記の雛形ではp要素を監視の対象にしています

範囲の設定

範囲の設定をしているオブジェクト『options』には3つの設定が行なえます

root

監視対象とする要素が交差しているかどうかを確認するための指定した範囲として使用される要素で、未指定の場合や、値に『null』を指定した場合はブラウザーのビューポートが指定した範囲として使用されます。

特定の要素を指定したい場合は「document.querySelector()」を利用して要素を指定します

上記の雛形ではnullを指定しているのでブラウザのビューポートが基準になっています

rootMargin

CSSのmarginプロパティのようにrootの周りにmarginを指定することができます。
マイナスの値を指定すると指定した範囲を狭めることもできます。
デフォルトでは0になっているようです

上記のひな形では’-50px 0’としていますのでビューポートに50px以上侵入してきたら処理を実行するように指定しています

threshold

thresholdははしきい値で、監視対象の要素がどのくらいの割合交差したときに処理を実行するかを指定します。
使える値は0~1までの数値で、監視対象の要素の20%が見えたら処理を実行するのであれば0.2を指定します。

20%を超える度に処理を実行したりすることもでき、その場合は、[0, 0.2, 0.4, 0.6, 0.8, 1]という配列を指定します。

rootに対して監視している要素が大きすぎるとうまく動かないケースがあるので大きな数値は使いにくい

Intersection Observerを使えるようにする

いわゆる初期化・実行する際のコードで1つ目の引数には交差したときに実行するコールバック関数を、2つ目の引数には範囲の設定で作った「options」を入れています。

コールバック関数は監視対象の要素が全て入った『entries』と、コールバックが呼び出される「IntersectionObserver」を『observer』で返します

対象の要素をそれぞれ監視する

observe()は監視対象に追加するメソッドで監視対象の要素は配列の形になっているのでforEachで一つづつtargetに取り出して引数に入れて処理しています

交差したときに実行する関数

『entries』はforEachで一つづつentryに取り出してそれぞれ処理をしていきます

if文の条件にある「isIntersecting」はプロパティで監視中の要素が設定した範囲と交差したらtrueを返してくれるのでこちらで状況を判断しつつ処理を実行できます。

実際に交差した監視対象の要素を対象に処理を実行したい場合は「target」プロパティを利用することで取得できるので『entry.target』に対して処理をしてください

『observer.unobserve(entry.target);』で監視を終了することもできるので状況に合わせて試してください

実装サンプル

とりあえず触れるようにサンプルを用意してみましたのでベースになるHTMLから

邪魔かもしれないけど一応cssも

sample1 やかましいぐらいにfadein

とりあえず手軽さアピールのためにdiv要素のすべての子要素を監視の対象として処理をするサンプルを作りました

cssではこんな感じのコードを追加しました

Intersection Observerの設定はデフォルトで、処理は交差したときにその要素に対してクラスactiveを付与するようにしてみました。

こいつをbodyの閉じ直前に配置していきます

sample2 jQueryを併用しつつthresholdを使う

thresholdを使ったときの動作確認とjQueryで処理したほうが楽な場合もあるかもしれないので併用するときのサンプルも用意してみました

cssはこんな感じのコードを追加しておきます

このサンプルではsection要素を監視の対象とし、section要素の50%が交差したときに処理を実行していきます。
処理は交差した要素をjQueryオブジェクトにしつつjQueryのaddClassでクラスactiveを付与していきます

もちろんですがjQueryを読み込んでいないとjQueryは使えませんので気をつけてください

sample3 footerにかぶる位置までスクロールしたらTOPボタンを消す

昔こんな処理で手こずった記憶があったので試してみたら簡単すぎたので一応サンプルとして紹介

今回作ったサンプルのベースではTOPボタンは下から50pxの位置に固定配置してあります。
すなわちfooterがrootMArginを上下-50pxと指定するとfooterとボタンが交差した瞬間消すことができそうです

交差した要素そのものを処理の対象にしていないケースとして参考になればと思います

なお、めんどくさいのでjQueryを使って処理しています

本当は目からウロコなんて落ちない
出るのは目やにだけ

PROFILE

フリーランスでweb系のデザイン・コーディング&プログラミングをしています

youtubeはじめました