しんぺー 
スクロールしたときにスライダーを動かす記事は多いけど、リサイズのことも考えたり面倒。
いい方法ないかな？
IntersectionObserverを使えばリサイズの心配は不要です。
サンプルコードはコピペで使えるように用意しましたのでどうぞ。
完成形のイメージ
スクロールするとスライダーが見えます。
スライダーが半分くらい見えたところで動き出します。
See the Pen slick & IntersectionObserver by shimpei (@shimpei) on CodePen.
サンプルコード【コピペで実装できます】
HTMLとCSSはCodePenでご確認ください。
特に変わったことはしていません。よくあるslickの書き方です。
JavaScript
この記事ではIntersectionObserverを使用しています。
よくある記事ではスクロールイベント$(window).on("scroll", function ()を使用していますが、スクロールイベントには大きな問題がいくつかあります。
スクロールイベントの問題点については後ほど解説します。
まずはIntersectionObserverを使用したコードについて説明します。
IntersectionObserver使ったことなくてもコピペで使えます。
まずは使ってみて、気に入ったら深堀りしてみるとかで良いと思います。
IntersectionObserverを使用する理由
今回のようにスクロールして要素が表示されたときに処理を実行するにはIntersectionObserverを使用します。
このために生まれてきました。
- スクロールして画面に要素が表示されたときに何かしら実行したければ、
IntersectionObserverを使用します（スクロールイベントは前時代の記述です）。 - レスポンシブに適応させるコードを記述する必要がない（ワンソースでレスポンシブ対応しています）。
- 再計算させるコードは書きたくないですよね。あれ嫌いです。
- パフォーマンス良い（交差した時だけ実行される）・
IntersectionObserverを使用したコード
$(function () {
const slider = $(".slider");
slider.slick({
autoplay: false,
autoplaySpeed: 5000,
infinite: true,
fade: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
});
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
slider.slick("slickPlay");
} else {
slider.slick("slickPause");
}
});
}, {
root: null,
rootMargin: '0px',
threshold: .5
});
observer.observe(slider[0]);
});
あ、これ、class名合わせてslickのオプションだけ好きに設定したらそのまま使えるやん〜。
スクロールイベントの問題点
- パフォーマンスが悪い（スクロールやリサイズの度にJSが発火している）
- リサイズに対応できるコードを記述する必要がある（再計算が必要になる場面が多い）。
- コードが長くなる
- バグの温床
おそらく皆さん薄々気付いていたのではないでしょうか？
コンソール確認するとスクロールの度に発火されているのを見たことあるかと思います。
スクロールイベントの問題点を上げましたが、IntersectionObserverではこのような問題が起こりません。
個人的にはスクロールイベントと違ってレスポンシブ時に追加でコードを記述する必要がないのが楽だし、何より安心です。
まとめ
スクロールして、スライダーが見えたときにスライドを開始するコードを紹介しました。
前時代はスクロールイベントを使用していましが、なにかと問題点があったので現在ではIntersectionObserverを使うのが良いです。
サンプルコードはそのままコピペできます。
IntersectionObserverが理解できなくても大丈夫です。
まずは使ってみて気に入ったら理解を深めていきましょう。
IntersectionObserverについて気になる方はこちらの記事もどうぞ。
