PerfectScrollbarだとスクロールイベント癖あるよ🐟

まえがき

使ったテンプレにPerfectScrollbarが使われていて、scrollTop反応しないじゃん？オワタって。

イベント一覧

PerfectScrollbarは特殊なイベントを用意しています。
https://perfectscrollbar.com/events.html

特殊なイベントを用意してくれている

ユースケースとしてjQuery3のスクロールイベントとします。結構あるパターンな割にこの説明はググっても英語でもでてきません。

スクロールイベントのサンプルは以下のサイトを参考にさせてベースとして、そこにPerfectScrollbarバージョンをして手を加えました。
https://haniwaman.com/is-in/

$(function () {
  // 対象エリアの上部の位置
  let areaTop = parseInt($(".target-area").offset().top - 600);
  // 対象エリアの下部の位置
  let areaBottom = parseInt(areaTop + $(".target-area").innerHeight());

  $(".main-panel").on('ps-scroll-y', function() {
    let scrollTop = parseInt($(this).scrollTop()); // スクロール上部の位置

      if (scrollTop > areaTop && scrollTop < areaBottom) {
        // スクロールが対象エリアに入った場合
        $("body").addClass("is-in");
      } else {
        // スクロールが対象エリアから出ている場合
        $("body").removeClass("is-in"); 
      }
  });
});

あとがき

ps-scroll-yみたいなPerfectScrollbar専用イベントをonイベントで発火できます。そして高さは$(this).scrollTop()みたいに取れます。ちゃんと準備してくれているのですが、あまり事例記事がなかったのでカキコしました。

但し、今時スクロールバーもcssで変えられるし、ブラウザのスクロールバーもデフォできれいなので、PerfectScrollbar自体廃止してしまうのが一番おススメ。だから記事がないのか..。