「スクロールバーを好みのデザインにしたい」
「スクロールバーのデザインをカスタマイズするにはどうしたらいいの？」
こんな悩みにお答えします｡
じつは､スクロールバーをカスタマイズするにはCSSを使った方法とjQueryプラグインを使った方法があります｡
CSSを使った方法はIEなど古いブラウザには対応していませんが､jQueryプラグインを使った方法なら多くのブラウザに対応することができます｡
この記事では､以下のことがわかります｡
- CSSでのカスタマイズ
- jQueryプラグイン(jQuery custom content scroller)でのカスタマイズ
記事を読み終えると､スクロールバーを好みのデザインにすることができ､競合サイトと差別化したWebサイトをつくることができます｡
スクロールバーのカスタマイズ
CSS
CSSのみでスクロールバーをカスタマイズする方法です｡
注意しないといけない点はIEには対応していません｡古いブラウザに対応する必要がない､ブラウザ間で違いを気にしない場合はこの方法で設定するほうが速度も速くおすすめです｡
個人的な好みでは､デフォルトのスクロールバーだとやや太いのが気になるので細めで設定しています｡
細くするとスクロールバーをマウスでクリックしにくくなるので､マウスオーバーしたときに少し太くなるようにしています｡
ただ､なぜかうまく動いていないときもあるようです｡
/* スクロールバー全体 */
::-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も含めほとんどのブラウザに対応しないといけない場合はこちらの方法になります｡
- 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
- 公式サイト
まとめ
スクロールバーを好みのデザインにカスタマイズする方法を解説しました｡
- IEなど古いブラウザ対応が不要な場合はCSSでカスタマイズする
- 古いブラウザ対応が必要な場合はjQueryプラグインを使ってカスタマイズする
- スクロールバーをカスタマイズするjQueryプラグイン
- jQuery custom content scroller
- perfect-scrollbar.js
- fleXcroll.js
スクロールバーまでカスタマイズしているサイトはそれほど多くないので､オリジナルのスクロールバーにしていけば､他サイトと差別化ができると思います｡
