矢印関数を怖がっている開発者のためのIntersection Observer

私のJavaScriptは基本的にビクトリア朝のコパープレートに相当する.頻繁に長いワイン.時々不可解.ちょっと、率直に.
最近、私はドキュメントについてprodを引き起こしましたthe IntersectionObserver そして、私がよりよくすることができると考えました.レッツゴー!

ターゲット要素をつかむ

まず、対象とする要素を変数に代入します.使っているconst 僕はすごくモダンだから知らない.

const targetElement = document.querySelector('[data-js="target"]');

使いがちdata-js クラスまたはID それで、マークアップを見ている誰でも、それが何であるかについてわかっています.この方法の制限の1つは、上記のセレクタが何かにマッチしないということですdata-js="target tooltip" . 気をつけて.

保険のビット

私が例のコードから離れる傾向がある1つのものは、我々が理想的に作るべきであるチェックの種類です.でも今回はそうしないようにしましょう.

const targetElement = document.querySelector('[data-js="target"]');
if (targetElement && 'IntersectionObserver' in window) {
  // something?
}

これには二つのことがあります.

我々が見たい要素は存在する

WebブラウザはInternet Explorerではありません

オプションを開く

だから今、我々はすべての内部知っているif ステートメントは、クールなWebブラウザによってのみ読み込まれますoptions オブジェクト.
これは、IntersectionObserver 関数.それはなぜオブジェクトですか?個々のデータポイントとして引数を渡すので、昔ながらのファッションです.すべては2020年の対象です.あなたの母でさえ、物です.

const targetElement = document.querySelector('[data-js="target"]');
if (targetElement && 'IntersectionObserver' in window) {

  const options = {
    root: Document.documentElement,
    rootMargin: '0px',
    threshold: 0
  };

}

それで、オプションの中に3つの名前/値組があります:

根

これは我々が関係しているスクロールバーを所有する要素です.これについての良いことは、我々は我々が望む任意の要素のスクロールを観察することができます-だけでなくHTML タグ.しかし、我々が全くこの部分を決して定義しないならば、ブラウザーはちょうど我々がHTMLタグを意味すると仮定します.に設定するDocument.documentElement 少し冗長です.

ルートマージン

これは、スクロールオブジェクトの周りに作成できるガッタのCSSのような値です.値が0px より優雅ではなく0 . これは意図的です.どうやらJavaScriptは情熱的にどんな種類の何かを取得しています.
CSSのようなので、次のように指定することもできます10px 20px 30px 40px or 50px 20px あるいは20% 0% 50% .
あなたのページはこうです.

上の赤い領域はrootMargin 言う25% . フッターが赤いマージン境界を越えるまで、ユーザーはページをスクロールダウンします

それがポイントですIntersectionObserver 火がつくだろう.
あなたが定義しないならばrootMargin , デフォルトはゼロです.

閾値

役に立つrootMargin あなたが望むならIntersectionObserver あなたの要素の底がスクロール要素の底を横切ったとき、発射するために?ここはどこですthreshhold 輝く.上の例では以下のようにオプションを設定します:

const targetElement = document.querySelector('[data-js="target"]');
if (targetElement && 'IntersectionObserver' in window) {

  const options = {
    root: Document.documentElement,
    rootMargin: '0px',
    threshold: 1
  };

}

しきい値はゼロと1の間の値をとりますIntersectionObserver 火災.
次のようなイメージがあったとしましょう.

... そして、あなたはイメージが簡単に1つの猫が点滅していたスワップアウトしたが、画像が画面上で60 %だった場合のみ.得るためにIntersectionObserver 火を付けるには、設定するthreshold このように:

const targetElement = document.querySelector('[data-js="target"]');
if (targetElement && 'IntersectionObserver' in window) {

  const options = {
    threshold: 0.6
  };

}

上記のコードでは、2つの名前/値のペアを削除しました.私は、オブジェクトであるすべて(あなたのキンを含む)の1つの利益が正しいデータが機能の適切な部分に達することを確実とするために空の引数を渡す必要はないということです.おそらく、それらの現代の子供たちは、ずっと一緒でした.
しかし、それはすべてのしきい値はできません!また、配列を渡すこともできます(配列は、大文字でそれらを入力する必要があるという点で、神のようです.その配列はゼロと1との間に値の束を含むことができますIntersectionObserver すべての後に火災だろう.このように:

const targetElement = document.querySelector('[data-js="target"]');
if (targetElement && 'IntersectionObserver' in window) {

  const options = {
    threshold: [0, 0.1, 0.2, 1]
  };

}

あなたが何の価値も渡しないならばthreshold , then IntersectionObserver あなたのオブジェクトの最初のピクセルが境界線を横切るとすぐに、発射します.

その新しい物体のにおい

今私たちの素敵な新しいIntersectionObserver . それは美しい瞬間です.恥ずかしがり心地を感じる必要はありません.ルック

const targetElement = document.querySelector('[data-js="target"]');
if (targetElement && 'IntersectionObserver' in window) {

  const options = {threshold: 1};
  // V Look down V
  const observer = new IntersectionObserver(somethingHappened, options);

}

オブジェクトは2つのパラメータを取ります.そして、それが引き起こされるならば、呼ばれる関数の名前とoptions 我々がちょうどカバーしたオブジェクト.覚えているoptions , 正しい?私は文字通りあなたを紹介しました.この2番目のパラメータは省略可能です.スクロール要素をページ全体に設定したい場合は、スクロールの周りのガタをゼロにしたい場合は省略できますIntersectionObserver あなたの選択した要素の最初のピクセルとしてすぐに画面上にそれを作る火.
あなたは、我々が言われないと気がつきましたIntersectionObserver どのページを見る必要があります.そのビットは後で来る.今のところ、オブジェクトを設定しています.
すべてが機能するならば、火をつける機能を加えましょう

const targetElement = document.querySelector('[data-js="target"]');
if (targetElement && 'IntersectionObserver' in window) {

  const options = {threshold: 1};
  const observer = new IntersectionObserver(somethingHappened, options);
  function somethingHappened(event) {
    console.log(event);
  }
}

あなたはおそらくどこだろうevent から来る.それはおそらくあなたが尋ねる必要はありません.ジャスト仮定IntersectionObserver あなたのポケットには、Wertherのオリジナルのように見ていないときにスリップした.

誰がオブザーバーを観察しますか？

上記のコードは全く何もしません.なぜなら、私たちがしたことは変数(well,定数)と関数を設定するからです.我々は得るために、この行を追加する必要がありますIntersectionObserver 実際に選択した要素を監視します.

observer.observe(targetElement);

これは、すべての設定を接続するビットですIntersectionObserver 要素を指定します.
このように、あなたはIntersectionObserver したら、あなたがしたい場合は、ページ上のさまざまな要素の束にそれを呼び出します.
以下はその行です.

const targetElement = document.querySelector('[data-js="target"]');
if (targetElement && 'IntersectionObserver' in window) {

  const options = {threshold: 1};
  const observer = new IntersectionObserver(somethingHappened, options);
  function somethingHappened(event) {
    console.log(event);
  }
  observer.observe(targetElement);
}

あなたのスクロールバーのイベントリスナーとして考えてください.

早熟

ここで奇妙なことがあります:上記のコードを実行する場合は、すぐにコンソールログを取得する必要はありませんスクロールが必要です.それで、取引は何ですか?取引は以下の通りです.IntersectionObserver それは最初の負荷時にデータの全体の束をぼやけているし、もう一度、何か別の重要な発生します.
要するに、ログの中に何があるかについて突き出してください.重要なビットです.

event[0].isIntersecting

この部分が戻るならtrue , それから、あなたの要素が境界を越えたと結論することができます.これは、あなたがif 条件

const targetElement = document.querySelector('[data-js="target"]');
if (targetElement && 'IntersectionObserver' in window) {

  const options = {threshold: 1};
  const observer = new IntersectionObserver(somethingHappened, options);
  function somethingHappened(event) {
    if (event[0].isIntersecting) {
      // I dunno - do something, I guess?
    }
  }
}

このイベントは、ページをスクロールしたときに一度火にすることに注意してください.要素がビューポートを離れると、それは起動しません.これが役に立つと思います.