【JavaScript】SimpleBarを使ってスクロールバーを実装する（簡単にカスタマイズできます）

スクロールバーをオリジナルで作ってほしいって言われたんですけど、作ってみたらブラウザによって変わっちゃうんですけど何とかなりませんかねー？

『SimpleBar』を使えば簡単にできちゃいますよー

【サンプル】縦スクロール

See the Pen 【SimpleBar】スクロールバーを実装する（簡単にカスタマイズできます） by 125naroom (@125naroom) on CodePen.

コードはこちら

HTML

スクロールバーを出したいところに、『data-simplebar』『data-simplebar-auto-hide=”false”』を追記するだけです。『data-simplebar-auto-hide=”false”』は、スクロールバーを常に表示させる指定になるので不要な場合は外せばオッケーです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.js"></script>

<div class="scroll__inner" data-simplebar data-simplebar-auto-hide="false">
  <table>
    <tbody>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキスト</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.scroll__inner {
  background-color: #ffffff;
  height: 350px;
  padding: 40px 30px 45px 20px;
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* IE, Edge 対応 */
  scrollbar-width: none;
  /* Firefox 対応 */
}
.scroll__inner::-webkit-scrollbar {
  /* Chrome, Safari 対応 */
  display: none;
}
.simplebar-scrollbar::before {
  background: #ffffff;
  border-radius: 0;
  width: 5px;
  margin-left: 3px;
  margin-top: 2px;
}
.simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}
.simplebar-track {
  background: #cbd2e0;
  width: 15px !important;
}

【サンプル】横スクロール

See the Pen 【SimpleBar】スクロールバーを実装する（横スクロール） by 125naroom (@125naroom) on CodePen.

コードはこちら

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.js"></script>

<div class="scroll__inner" data-simplebar data-simplebar-auto-hide="false">
  <div class="f_area">
    <div class="f_one">
      <a href="https://125naroom.com/web/4184" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt=""></a>
    </div>
    <div class="f_one">
      <a href="https://125naroom.com/web/4184" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt=""></a>
    </div>
    <div class="f_one">
      <a href="https://125naroom.com/web/4184" target="_blank"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt=""></a>
    </div>
  </div>
</div>

CSS

.scroll__inner {
  background-color: #ffffff;
  padding: 0 0 20px 0;
  overflow-x: scroll;
  -ms-overflow-style: none;
  /* IE, Edge 対応 */
  scrollbar-width: none;
  /* Firefox 対応 */
}
.scroll__inner::-webkit-scrollbar {
  /* Chrome, Safari 対応 */
  display: none;
}
.simplebar-scrollbar::before {
  background: #ffffff;
  border-radius: 0;
  height: 5px !important;
  margin-left: 2px;
  margin-top: 3px;
}
.simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}
.simplebar-track {
  background: #cbd2e0;
  height: 15px !important;
}

『SimpleBar』のダウンロード

まずは『SimpleBar』に必要なファイルを下記サイトからダウンロードします。

GitHub – SimpleBar

『SimpleBar』の使い方

必要なファイルは以下の2点です。

simplebar.min.css
simplebar.min.js
『min』のついてないファイルでもオッケーです。『min』が付いているファイルは改行などがない容量軽減版になります。

HTML

<link rel="stylesheet" href="css/simplebar.min.css"/>
<script type="text/javascript" src="js/simplebar.min.js"></script>

CDNを使う場合は、

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.js"></script>

simplebar – cdnjs.com