125naroom / デザインするところ(会社)です。

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

さいごに

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

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

センダイパルコ15th | 仙台PARCO
ちょっと思い出しただけ
【Google Chrome】ショートカットキーまとめ(Windows or Mac)