目次
thresholdの他に指定することができる、rootMarginオプションについて見ていきます。
- rootの指定
- ロートマージン
rootの指定
Rootの指定はこれまでthresholdで指定してきました。
例えば20％画像が交差したらtrueと返すような指定です。
詳しくは『Intersection Observerで処理するタイミングを指定する方法』の記事を御覧ください。
これまでは画像が20％と画像中心の指定でしたが画面であるroot中心の指定をすることができます。
例えば表示画面の下から100pxの地点に画像が重なった場合にtrueと返すような場面などです。
ロートマージン
ではどうするのかというとoption の指定にrootMargin: ‘0px 0px 100px’ ,と書いていきます。
マージンの指定方法はこれまでのCSSで学んだような指定方法で大丈夫です。
ただ、CSSでは0pxの場合pxを省略しても大丈夫でしたがJavaScriptで書く場合はpxを省略できないので覚えておきましょう。
このときthreshold: 1 ,も指定しておくと下が100px上がって、更に画像下部が100％になったタイミングで画像がふわっと現れるようが指定をすることができます。
以上
