スクロールバーをカスタマイズできるライブラリを探して。いくつか試したけど、ページ内に複数あるとうまくいかなかったり、画面をリサイズするとうまくいかなったりして。だったら自作しよう、ということで、スクロールバーをカスタマイズする、jQueryベースの自作ライブラリの紹介。

サンプル https://sample.simplesimples.com/scroll2/
GitHub https://github.com/smplsmplsdsn/scroll2

こだわったのは「シンプル」であること

サンプルよりさらに最低限必要なところだけを抜粋するとこんな感じ。

html

<div class="scroll">
  <div class="scroll__outer">
    <div class="scroll__inner">
      <div class="scroll__content">
        <div class="unit"><div class="unit__inner"></div></div>
        <div class="unit"><div class="unit__inner"></div></div>
        <div class="unit"><div class="unit__inner"></div></div>
        <div class="unit"><div class="unit__inner"></div></div>
        <div class="unit"><div class="unit__inner"></div></div>
        <div class="unit"><div class="unit__inner"></div></div>
        <div class="unit"><div class="unit__inner"></div></div>
        <div class="unit"><div class="unit__inner"></div></div>
        <div class="unit"><div class="unit__inner"></div></div>
        <div class="unit"><div class="unit__inner"></div></div>
      </div>
    </div>
  </div>
</div>

CSS

リストの余白とスクロール領域の幅を好きなように指定する。
ここでは、余白を20px、スクロール幅を50vwとしている。

.scroll__content {
  gap: 20px;
}
.scroll {
  width: 50vw;
}

リスト一つ分のスタイル調整する。
実際には、たとえば見出し、タイトル、タグ、サムネイルなどのHTMLコーディングとCSSスタイルを書くことになるが、スクロールバーのカスタマイズにフォーカスするため、リスト一つ分はシンプルな矩形としている。

.unit__inner {
  width: 200px;
  height: 150px;
  background: #eee;
}

JavaScript

scroll.show('.scroll')

これだけ。

縦スクロールの場合

ちなみに、このサンプルでは横スクロールだが、縦スクロールしたい場合は、下記のようにhtmlに「data-type=”vertical”」を追加し、JavaScriptで呼び出す際に、縦方向であることを記述する

<div class="scroll"　data-type="vertical">
  ・・・
</div>

scroll.show('.scroll', {
  direction: 'vertical'
})

色や線の太さ、バーの余白を調整する

ちなみに、第二引数にオブジェクトをセットすることで、スクロールバーの色や線の太さ、左右の余白をカスタマイズできるようにしている。

キー名	型	説明
direction	string	horizontal | vertical スクロールの方向。指定しない場合は横スクロール（horizontal）となる
padding	number	スクロールバーの左右もしくは上下の余白を数字で指定する（単位はpx扱いとなる）。指定しない場合は余白なし（0）となる
color	string	バーの背景色 例) #cccccc
bg	string	バー領域の背景色 例) #000000
size	number	バーの幅もしくは高さ（単位はpx扱いとなる） 指定しない場合は2。最大値は20。
bg_size	number	バー領域の幅もしくは高さ（単位はpx扱いとなる） 指定しない場合は2。最大値は20。

あらかじめ読み込んでおく内容

スクロールバーをカスタマイズするための共通設定用として、jQueryとCSS/JavaScriptを用意している。そちらについては、サンプルやGitHubで公開するので、興味ある方はご覧ください。