目次
交差した要素について取得できる情報について確認していきます。
- 情報を取得しよう
- デベロッパーツールで見ていこう
前回はIntersection Observerで処理をするタイミングを指定する方法について見てきました。
『Intersection Observerで処理するタイミングを指定する方法』はこちらを御覧ください。
今回は交差した要素の情報を取得する方法について見いていきたいと思います。
今回はよく使う、ターゲットがrootの何％交差しているかや交差をしているかの真偽値ターゲットに何が使われているのかなどを見ていきたいと思います。
まず前回のthresholdはシンプルにするために0.2に戻しておきます。
情報を取得しよう
交差したターゲットはcallbackの処理の引数で受け取ることができます。
また複数受け取ることも可能なので今回は配列を使っていきます。
引数はentriesとしてあげて出力もentriesの0番目ということでconsole.log(entries[0])としてあげます。
デベロッパーツールで見ていこう
では実際にどのように表示されるか見ていきましょう。
見る方法はディベロッパーツールのコンソールを見ていだだければ良いでしょう
まずは縮小されているのでクリックをして展開してあげます。
色々とあるのでよく使う用語のの解説をしていきます。
intersectionRatioですがターゲットがrootに何％交差しているかがわかります。
isIntersectingは交差をしているかを真偽値で返してくれます。
交差していればtrue交差していなければfalseで返されます。
最後にtargetですが要素が何を示しているかを返します。
今回は画像を使っているのでimgとなっています。
以上
