こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は非常に便利なプラグインをご紹介します。

皆さんは経験ありますでしょうか。
デザイナーからデザインカンプが届いて、開いてみると、
スクロールバーにもデザインが入っていることがたま〜にあります。

さて、どうしたものかと悩んでしまうところですが、
そんなコーダーにオススメのプラグイン「OverlayScrollbars」を使うと簡単にスクロールバーのデザインをいじれてしまいます。

◆公式サイト
https://kingsora.github.io/OverlayScrollbars/

実装例

スクロールバーが赤くなってますね！

HTML例

まず下記コードを＜head＞内に記述してください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.10.0/styles/overlayscrollbars.min.css">

そうしたら下記コードをjsファイルの手前に記述してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.10.0/browser/overlayscrollbars.browser.es6.min.js"></script>

<div id="js-scroll">
  <div class="content">
    texttexttexttexttexttexttexttexttexttexttext<br><br>
    texttexttexttexttexttexttexttexttexttexttext
    texttexttexttexttexttexttexttexttexttexttext<br><br>
    texttexttexttexttexttexttexttexttexttexttext<br><br><br><br>
    texttexttexttexttexttexttexttexttexttexttext
    texttexttexttexttexttexttexttexttexttexttext<br><br>
  </div>
</div>

CSS例

#js-scroll {
  height: 200px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.content {
  height: 500px;
  padding: 10px;
  background-color: #eee;
  white-space: wrap;
}
.os-scrollbar-handle{
  background: red;
}

JavaScript例

var { 
  OverlayScrollbars, 
  ScrollbarsHidingPlugin, 
  SizeObserverPlugin, 
  ClickScrollPlugin  
} = OverlayScrollbarsGlobal;
OverlayScrollbars(document.querySelector('#js-scroll'), {
  className: "os-theme-light",
  resize: "both",
  sizeAutoCapable: true,
  paddingAbsolute: true,
  scrollbars: {
    clickScrolling: true
  },
  overflow: {
  x: 'hidden',
},
});

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！