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

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

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

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

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

<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>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.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;
}

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

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

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

<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>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.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;
}

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

『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

メモ

『SimpleBar』のことで何かわからないことがあれば『SimpleBar』公式サイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

GitHub – SimpleBar

SimpleBar 公式サイト

SimpleBar デモページ

さいごに

わ、スマホでも同じスクロールバーになりましたー！

おめでとうございますー！