cssのscroll-snapとjsのscrollイベントが競合して実行できません。

Question

前提・実現したいこと

cssのscroll-snapでフルページスクロールのページを作成しつつ、スクロール連動で要素をフェードインさせたいです。

<main class="fullpage">
 <div class="section section01"></div>
<div class="section section02"></div>
</main>

.fullpage {
    overflow: scroll;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
    height: 100vh;
}
.section {
        scroll-snap-align: start;
        height: 100%;
    }

$(document).scroll(function () {
        let scrollTop = $(window).scrollTop(); // スクロール上部の位置
        let areaTop = $(".section02").offset().top; // 対象エリアの上部の位置
        let areaBottom = areaTop + $(".section02").innerHeight(); // 対象エリアの下部の位置

        if (scrollTop > areaTop && scrollTop < areaBottom) {
            console.log('section2-in')
            $(".section02").addClass("js-show"); // スクロールが対象エリアに入った場合
        }
    });

cssのscroll-snapを使うとjsのスクロールイベントでスクロール連動のイベントが作動しません。
尚、当初フルページスクロール用にfulopage.jjsを使っており、次のページ(.section02)にスクロールでイベント実行はfullpage.jsの標準オプションのonleaveで可能なのですが、
今回はページ(.section02)の途中に到達した時に実行したいのでそのオプションも使えません。
それならcssのscroll-snapでなら可能かと思い試しましたがやはりスクロールでイベントが実行できません。
ここ何日間もこの問題に悩ませれています。もし解決策もしくはスクロールイベントを使わずにスクロール連動のフェードインをする方法をご存知でしたら教えてください。よろしくお願いします。

Answer 1

.fullpage の高さを画面の高さ(height: 100vh;)に設定していたら、$(document).scroll は発生しません。（他に要素があれば別ですが）

overflow: scroll; で .fullpage内でスクロールするようにしているので、発生するのは、$(".fullpage").scroll です。

とりあえず、下記でどうなりますか。

$(".fullpage").scroll(function () {
        let scrollTop = $(".fullpage").scrollTop(); // スクロール上部の位置
        let areaTop = $(".section02").offset().top; // 対象エリアの上部の位置
        let areaBottom = areaTop + $(".section02").innerHeight(); // 対象エリアの下部の位置

        if (scrollTop > areaTop && scrollTop < areaBottom) {
            console.log('section2-in')
            $(".section02").addClass("js-show"); // スクロールが対象エリアに入った場合
        }
    });

Comments

[Ryoma0305]

なるほど。スクロールイベントは実行できるようになりました。ありがとうございます。
ただ、これはまた別の問題だと思うのですがスクロールの挙動が変で、.section02の下までスクロールしし終えると.section02のトップまで勝手に戻ってしまいます。これはマークアップの問題でしょうか？

html
<main class="fullpage">
<div id="section01></div>
<div id="section02">
<div class="u-pc-only"> </div>　//pc時のみ表示

<div class="u-sp-only”>　//sp時のみ表示
<div class="p-home__content">
<div class="p-home__content-inner">
<div></div>
<p></p>
<div></div>
<div　id="section03"></div>
</div>
</div>
<div class=“l-footer”></div>
</div>
</div>
</main>

css
.fullpage {
overflow: scroll;
scroll-snap-type: y mandatory;
scroll-snap-stop: always;
height: 100vh;
}

.section {
scroll-snap-align: start;

}

.section01 {
position: relative;
height: 100%;
}
.section02 {
scroll-margin-bottom: 300px;
}

[Ryoma0305]

インデントが消えてしまって見づらくてすみません。

[hatena19]

提示のHTMLの開始タグと閉じタグの対応がおかしいようにみえます。
今回の質問とはまた別の問題だと思いますので、新規に質問しなおした方がいいと思います。
その時は、上記の点を確認したうえで、動作を期待して、どのような動作になってしまうのか、を具体的に説明してください。また、現象を他人も再現できるコードを提示したください。(HTML, CSS, JSコード)