すする、
サイトのダーク/ライト モードを切り替えるために、 ScrollTriggerでgsapを使用しています。
トリガーがいつ表示されるかを検出する関数を作成しました。
ScrollTrigger.create({
trigger: ".js__trigger-dark",
start: "bottom bottom",
end: "+=300",
onLeave: self => changeTheme(),
onEnterBack: self => disableTheme(),
});
ScrollTrigger.create({
trigger: ".js__trigger-light",
start: 'bottom bottom',
onLeave: self => disableTheme(),
onEnterBack: self => changeTheme(),
});
function changeTheme() {
jQuery('html').attr('data-theme','dark');
}
function disableTheme() {
jQuery('html').attr('data-theme','');
}
たとえば、.js__trigger-darkは、ユーザーが最初のセクションを 300px 超えてスクロールするとダーク モードを切り替え、ユーザーがクラス.js__trigger-darkのセクションに再度スクロールすると属性を削除します。これは、ユーザーが画面の下部に到達して属性が削除されるまで正常に機能します。
画面の一番下までスクロールすると削除される理由を誰かが説明できますか? 何らかの理由で onEnterBackが呼び出されており、その理由がわかりません。
よろしく、b