【jQuery】perfect-scrollbarでスマートかつ軽快なスクロールバーをデザインする

こんにちは。
ブラウザのスクロールバーって、様々で見た目がよろしくないものもありますよね。
ページ自体のスクロールバーは仕方ないとして、overflowしているコンテンツにスクロールバーが出てしまうときなんか幅も邪魔だし外観おかしくなるし、どうにかならないものかといつも悩んでいました。

Macでトラックパッドなどつかっているときはそもそもスクロールバーが出なかったりして気づかなかったりするんですけどね…。

スクロールバーもjQueryでデザインできる

今回ご紹介するライブラリはperfect-scrollbarといって、さくっとスマートなスクロールバーに置き換えることができるものです。

こんな感じ。

See the Pen MYjmZY by Tsukasa Nagata (@nt-uni) on CodePen.0

How to

jQueryのコアをインポートする

jQueryをつかったライブラリになるので、jQueryを配置する必要があります。

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

CDNから入れるとこんなかんじですね。もちろんDLしたものをお使いいただいても問題ありません。

perfect-scrollbarのライブラリを配置する

perfect-scrollbar

上記公式ページからDLしてきて、設置します。
設置するものは、

  • perfect-scrollbar.min.css
  • perfect-scrollbar.min.js

です。

どれをスクロール対象とするか記述する

$(function() {
    $('#Demo').perfectScrollbar();
});

CSSをちょっと設定しておく

#Demo{
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 300px;
}

縦横の幅はそれぞれ設定してください。
position:relative;overflow: hidden;は入れておかないと変なふうになります。

その他

基本的には上記の準備だけでOKです!

オプションとしてスクロールのスピードや、キーボードの方向キーを有効にする設定などがあります。動的なコンテンツの場合、以下のようなファンクションも用意されています。

$('#Demo').perfectScrollbar('update');

まとめ

いかがでしたか?
いくらオシャレなサイトをつくっても、ブラウザ仕様になってしまう部分がありますが、こういったライブラリをつかってカスタマイズが簡単にできると一層クオリティの高いものに仕上りますね!

フォローして続編をチェック

@universionsをフォロー