ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

スクロールバーを好みのデザインに!CSS、jQueryでカスタマイズ

スクロールバーを好みのデザインに!CSS、jQueryでカスタマイズ

デザインにこだわりたい人だとブラウザデフォルトのスクロールバーに不満を持つ人が多いと思います。
ホームページでスクロールバーをカスタマイズする方法について紹介します。

目次
  1. スクロールバーのカスタマイズ
    1. CSS
    2. jQueryプラグイン
  2. まとめ

スクロールバーのカスタマイズ

CSS

CSSのみでスクロールバーをカスタマイズする方法です。
ただ、注意しないといけない点はIEには対応していません。古いブラウザに対応する必要がない、ブラウザ間で違いを気にしない場合はこの方法で設定するほうが速度も速くおすすめです。

See the Pen vYNmmeo by hashi84 (@hashi84) on CodePen.

個人的な好みでは、デフォルトのスクロールバーだとやや太いのが気になるので細めで設定しています。
ただ細くするとスクロールバーをマウスでクリックしにくくなるので、マウスオーバーしたときに少し太くなるようにしています。
ただ、なぜかうまく動いていないときもあるようです。

/* スクロールバー全体 */
::-webkit-scrollbar {
  width: 4px;
}
/* スクロールバーをマウスオーバーしたときの幅 */
::-webkit-scrollbar&:hover {
  width: 10px;
}
/* スクロールバーの軌道 */
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}
/* スクロールバーの動く部分 */
::-webkit-scrollbar-thumb {
  background: linear-gradient(to top, #5bbee5 0%, #52ddae 100%);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

jQueryプラグイン

jQueryプラグインを使ったスクロールバーのカスタマイズ方法です。
IEも含めほとんどのブラウザに対応しないといけない場合はこちらの方法になります。

公式サイト
jQuery custom content scroller
CDN
cdnjs malihu-custom-scrollbar-plugin
//js
https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js

//css
https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css

jQueryを読み込んだ後に以下をコピペします。
「.content」のところがスクロールバーを適用する要素です。

<script>
  (function($){
    $(window).on("load",function(){
      $(".content").mCustomScrollbar();
    });
  })(jQuery);
</script>

あらかじめ用意されているテーマのデザインを使用する場合は、公式サイトのデモから好みのデザインを選び、以下のように設定します。

$(".content").mCustomScrollbar({
  theme:"dark"
});

もし実現させたいデザインが用意されているテーマにない場合は、デベロッパーツールを使ってどの要素がどのように指定されているか地道に探し、それぞれ設定していく必要があります。

この他、以下のプラグインでもカスタマイズができるようです。

perfect-scrollbar.js
公式サイト
fleXcroll.js
公式サイト

まとめ

スクロールバーまでカスタマイズしているサイトはそれほど多くないので、オリジナルのスクロールバーにしていけば、他サイトと差別化ができると思います。