SimpleBarについて

Webページのスクロールバーを簡単にカスタマイズできるjavascriptライブラリです。

公式ドキュメントはこちら

やりたいこと

例えば利用規約などの領域をスクロールで読ませて、その後チェックボックスにチェックができるような機能を想定する。
その導線が複数ある時に、利用規約を1回読むと他の箇所も連動してチェックされるような処理を行いたい。

・jQueryを使用した記述をする
・スクロールバーの見た目を同じにしたいので、クラスに対して適用する
・オプションの「スクロールバーの自動非表示」を「flase」にする
・スクロールイベントを取得して続く処理を記述する

方法

公式ドキュメントを見ながら考えて色々つまずきましたが、以下のコードで実現できました。

script.js

//適用したいクラスを取得してeachで回す
$('.className').each(function () {
    //simplebarのインスタンスを作成してオプションを適用する
    const simpleBar = new SimpleBar(this, { autoHide: false });
    //スクロールイベントを取得する
    simpleBar.getScrollElement().addEventListener('scroll', function (event) {
      //続けたい処理を記述（チェックボックスのチェックがされるような）
    });
});

つまずいた箇所

公式ドキュメントのjQueryを使用する方法の記述として以下が書かれています。
「If you want to use jQuery:」の箇所。
【idの場合】

new SimpleBar($('#myElement')[0]);

【クラスを使用する場合】

$('.myElements').each((el) => new SimpleBar(el));

元々idを取得した以下の書き方で動かしていた。

  const simpleBar = new SimpleBar($('#idName')[0],{ autoHide: false });
  simpleBar.getScrollElement().addEventListener('scroll', function(event){
      //処理
  );

で、上記の【クラスを使用する場合】の記述を無視して「#idName」の箇所を「.className」をクラス名に変更した。
当然eachがないので、最初に出てきたクラスのみ処理が適用される動きになった。

参考