制作ブログ Web制作開発ツールライブラリスクロールバーをカスタマイズする

スクロールバーをカスタマイズする

スクロールバーをカスタマイズできるライブラリを探して。いくつか試したけど、ページ内に複数あるとうまくいかなかったり、画面をリサイズするとうまくいかなったりして。だったら自作しよう、ということで、スクロールバーをカスタマイズする、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'
})

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

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

キー名説明
directionstringhorizontal | vertical
スクロールの方向。指定しない場合は横スクロール(horizontal)となる
paddingnumberスクロールバーの左右もしくは上下の余白を数字で指定する(単位はpx扱いとなる)。指定しない場合は余白なし(0)となる
colorstringバーの背景色
例) #cccccc
bgstringバー領域の背景色
例) #000000
sizenumberバーの幅もしくは高さ(単位はpx扱いとなる)
指定しない場合は2。最大値は20。
bg_sizenumberバー領域の幅もしくは高さ(単位はpx扱いとなる)
指定しない場合は2。最大値は20。

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

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