[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar

大きいコンテンツをクリップして配置する際に添えるスクロールバーを実装する3KBと超軽量のjQueryのプラグインを紹介します。

Perfect Scrollbar
Perfect Scrollbar -GitHub

• 何をもってパーフェクトなのか
• Perfect Scrollbarのデモ
• Perfect Scrollbarの使い方

何をもってパーフェクトなのか

このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。

• ページ上のあらゆる要素にCSSで影響を与えないこと
• スクロールバーがオリジナルのデザインに影響を与えないこと
• スクロールバーのデザインは完全にカスタマイズ可能であること
• コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること

Perfect Scrollbarのデモ

デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。

デモ

「Change Size」でコンテンツのサイズを変更すると、それに伴いスクロールバーの大きさと位置も変更されます。

デモ：領域を拡大

バーの長さが変化していることに注目してください！

Perfect Scrollbarの使い方

Step 1: 外部ファイル

「jquery.js」とマウスのホイール操作用の「jquery.mousewheel.js」と当スクリプトを外部ファイルとして記述します。

 <script src="jquery.min.js"></script>
<script src="jquery.mousewheel.js"></script>
<script src="perfect-scrollbar.js"></script>

Step 2: HTML

スクロールバーを設置するコンテンツに容器（div）を加えます。

<div id='Demo'>
  <div>
    ...
  </div>
</div>

Step 3: CSS

容器となるdivにposition: relative; を定義します。

<style>
  #Demo { position: 'relative'; }
</style>

Step 4: JavaScript

jQueryのセレクタで容器を指定し、スクリプトを実行します。

        <script>
            $(function() {
                $('#Demo').perfectScrollbar();
            });
        </script>

コンテンツのサイズが変化し、スクロールバーも変化するのであれば、下記のようにオプションを使用します。

        <script>
            $(function() {
                $('#Demo').perfectScrollbar('update');
            });
        </script>