0

すする、

サイトのダーク/ライト モードを切り替えるために、 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

4

0 に答える 0