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

<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

スクロールバーを出したいところに、『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">
  <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』に必要なファイルを下記サイトからダウンロードします。

『SimpleBar』の使い方

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

  1. simplebar.min.css
  2. 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』のことで何かわからないことがあれば『SimpleBar』公式サイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

さいごに

きのこさん
わ、スマホでも同じスクロールバーになりましたー
きのこさん
おめでとうございますー
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

7

/

14

2024

Googleさんの
おすすめ

7

/

14

2024

デザインの記事

株式会社High Link
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】スライダープラグイン「slick」実装サンプル集