JavaScript + SimpleBar: スクロールバーのスタイルをカスタマイズする

[SimpleBar](http://grsmto.github.io/simplebar/)はスクロールバーをカスタマイズするライブラリです。スクロールバーを独自につくるのではなく、CSSのスタイルを割り当てるので、おかしな挙動は起こらず、ネイティブなスクロールのパフォーマンスが保たれます。あくまで、スクロールバーの見栄えを変えるだけです。

![SimpleBar logo](http://grsmto.github.io/simplebar/static/logo-b9548eb4e7099f8133fd4d039b2dff43.svg)


#### デザインはCSSで定める
SimpleBarは純粋なCSSでスクロールバーのスタイルを定めます。CSSで与えられるスタイルでさえあれば、自由にカスタマイズできるのです。

#### 軽量なライブラリ
6KBのとても軽いライブラリです。JavaScriptはスクロールの動きそのものには触れません。ネイティブな動きとパフォーマンスが得られます。

#### モダンブラウザをサポート
ChromeとFirefox、Safariなどのモダンブラウザに加え、Internet Explorer 11をサポートします。


ライブラリの概要は[ドキュメント](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar#simplebar--)と[デモページ](https://grsmto.github.io/simplebar/examples/)でお確かめください。本稿でつくるのは、つぎのサンプルです。「[JavaScript + CSS: ヘッダを上部に固定してカラムの中身はスクロールさせる](https://qiita.com/FumioNonaka/items/6ded2c747db5556f5217)」のコードにSimpleBarのスタイルを割り当てました。

<p class="codepen" data-height="360" data-theme-id="light" data-default-tab="html,result" data-user="FumioNonaka" data-slug-hash="ZEWzQwK" style="height: 360px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="JavaScript + SimpleBar: Customizing scrollbar style">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/ZEWzQwK">
  JavaScript + SimpleBar: Customizing scrollbar style</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# インストール
インストールには、npmやyarnが使えます。

```terminal
npm install simplebar --save
```

```terminal
yarn add simplebar
```

また、unpkgとjsDeliverからCDNで読み込むこともできます。JavaScriptとCSSのライブラリがそれぞれ必要です。

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/simplebar@latest/dist/simplebar.css"
/>
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
<!-- または -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"
/>
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
```

バージョンを固定したいときは、`@latest`をバージョン番号に置き替えてください。たとえば、本稿執筆時の最新リリース版であれば、`@5.2.1`です。unpkgで[バージョンのリスト](https://unpkg.com/browse/simplebar@5.2.1/dist/)が確かめられます。

なお、Webpackなどのモジュールローダーを使う場合には、JavaScriptとCSSのライブラリを`import`してください。

```js
import SimpleBar from 'simplebar';
import 'simplebar/dist/simplebar.css';
```


# data-*グローバル属性で設定する
SimpleBarのもっとも簡単な使い方は、スクロールバーを加えたい要素に[`data-*`グローバル属性](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/data-*)として`data-simplebar`を与えることです。なお、スクロールさせる要素には、CSSで`overflow: auto`を定めてください。

```html
<div data-simplebar>
  <!-- コンテンツ -->
</div>
```

これだけで、要素にはSimpleBarのスタイルでスクロールバーが表示されます(図001)。デフォルトでは、要素にマウスポインタを重ねたときバーが表れる自動表示の設定です。

#### 図001■設定されたスクロールバー
![2008001_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128949/9d26229e-8b1b-6f4e-be2b-671b2fa92a61.png)

つねにスクロールバーを表示しておきたいとき、タグに加えるオプション属性は`data-simplebar-auto-hide`です。JavaScriptコードの場合には、[`autoHide`](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar#autohide)オプションを用います。

```html
<div data-simplebar data-simplebar-auto-hide="false"></div>
```


# JavaScriptコードでSimpleBarを要素に設定する
JavaScriptコードで要素にSimpleBarを設定する場合は、[`SimpleBar()`コンストラクタに要素の参照を渡す](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar#other-usages)だけです。

```js
new SimpleBar(document.getElementById('myElement'));
```

オプションは、コンストラクタの第2引数のオブジェクトにプロパティとして渡します。たとえばつぎのコードはスクロールバーの自動表示([`autoHide`](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar#autohide))をオフにする場合です(デフォルト値は`true`)。

```js
new SimpleBar(document.getElementById('myElement'), { autoHide: false });
```


# CSSでスクロールバーのスタイルを変える
SimpleBarのスクロールバーのスタイルは、CSSにより定められています。つまり、[見栄えがCSSで変えられる](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar#styling)ということです。ここでは、スクロールさせるスライダのカラーをグラデーションにしてみましょう(図002)。こうしてでき上がったのが、冒頭のCodePenのサンプルです。

```css
.simplebar-scrollbar::before {
	background: linear-gradient(darkblue, skyblue);
}
```

#### 図002■スライダのカラーがグラデーションになった
![2008001_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128949/12fbfd4d-42c2-4d8f-8c59-799b4dff6d30.png)

SimpleBarのスクロールバーのCSSは、つぎの4つのクラスをもとに組み立てられています。具体的な定めについては、ソースコード[`simplebar.css`](https://github.com/Grsmto/simplebar/blob/master/packages/simplebar/src/simplebar.css)をご参照ください。

* `simplebar-content` スクロールするコンテンツを包むラッパー
* `simplebar-scroll-content` スクロールする要素が収められたコンテナ
* `simplebar-scrollbar` ユーザーがコンテンツを操作するスクロールバーのスタイルの定め
* `simplebar-track` スクロールバーが置かれた領域のスタイル