スクロール検知 IntersectionObserver

スクロール検知 IntersectionObserver

 

f:id:meowpaw:20210714054847p:plain

f:id:meowpaw:20210714054905p:plain

f:id:meowpaw:20210714054921p:plain

 

 IntersectionObserverというクラスはオプションをとることもできる。
オプションをオブジェクトリテラルで定義して,IntersectionObserverの第2引数に格納する

 

<使えるプロパティ>
root:交差対象とする親要素 基本的にはIntersectionObserverは現在表示されている画面にはいるかはいらないかというところで交差点をみているがrootに親要素,先祖要素を設定すると,それらとの交差点で監視を行うことができる。


rootMargin:デフォルト値は0px:交差対象のビューポート(表紙されている画面)。これを"-300px 0px 0px 0px"とすると上から300pxのところが交差点となる。ある程度入ってきたところで色がかわる。 必ずpxをつける。つけないとエラーになる。0のときもつける。


threshold:デフォルト値は0:上から入ってくるときは画面に入ってくる下の辺。上辺部分は1。逆に下から入ってくるときは上辺が0で下辺が1となる。

 

f:id:meowpaw:20210714055104p:plain