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

【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”』は、スクロールバーを常に表示させる指定になりますので、不要な場合は外せばオッケーです。

<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

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

JavaScript

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

コードはこちら

HTML

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

<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

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

JavaScript

<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 デモページ

さいごに

きのこさん
わ、スマホでも同じスクロールバーになりましたー!
きのこさん
おめでとうございますー!
デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

漢方薬局は東京青山の東洋医学サロン MEGURU
漢方薬局は東京青山の東洋医学サロン MEGURU
ちょっと思い出しただけ
『点』、登場人物は3人だけ