ターゲットが任意の割合だけ交差したときに、処理を実行する方法について見ていきます。
- 第２引数を渡す
- 複数の値の指定方法
第２引数を渡す
前回は『Intersection Observerで処理が実行されるタイミングについて』見てきました。
今回は任意のタイミングで処理する方法について見ていきましょう。
具体的には20％の地点と80％の地点での交差を監視していきます。
まずインスタンスに第２引数を入れてあげたいのでcallbackの後にカンマで区切ってoptionsと書いていきましょう。
const observer = new IntersectionObserver(callback, options);
と書いてあげればいいです。
複数の値の指定方法
次にoptionsに20％の時人80％の時に監視するように指定していきます。
まずオブジェクト形式にしてあげます。
thresholdというキーを使っていきます。
threshold は0から１の値を指定できるので２０％の場合は.2と書いていき、８０％のときは.8と指定してあげましょう。
const options = {
threshold: [0.2, 0.8],
};
と書いていけばいいですね。
これでスクロールした時、ルートが20％、80％に達したタイミングで監視するのでページを開いた時、画像下部が20％に達した時、80％に達した時、画像上部が20％、80％に達した時の計5回監視が行われます。
以上