スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた

WordPressでスクロールバーをカスタマイズ

別にスクロールバーは変えなくてもいいんじゃない？って思っているかもしれませんが、

実は、あるサイトを作っていて変えたくなったんです。

それは、画面全体を見ているときに右側に出ている縦スクロールバーではなく、（たまに下にも横スクロールがあるけど）

ページのコンテンツ部分にスクロールして見てもらう部分を作りたかったんです。

あくまでもスクロールバーを説明したかったのでデザインや中身のテキストは無視してください 🙂

スクロールバーをカスタマイズするJSは色々ありますが、ブラウザによって対応していないものもあり、結局これが一番よかったのでご紹介します。

導入方法

jQuery custom content scrollerのサイトから必要なファイルをダウンロードします。

こちらからもダウンロード先に行けます。

Project on GitHub

最低限必要なファイルは、

jquery.mCustomScrollbar.concat.min.js

jquery.mCustomScrollbar.css

この2つです。

基本的な使い方

まずは、自分のテーマファイルに「jQuery」が入っていることが前提です。

通常は入っていると思いますが、もしなければ、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>を読み込んでください。

ダウンロードしたjQuery.mCustomScrollbarのjsファイルとcssファイルを読み込みます。

テーマファイルのヘッダー内に、

<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

記述してください。

子テーマを作っている人は、子テーマにあるfunctions.phpファイルに書き込めばヘッダー内に反映されます。

functions.phpの書き方参考

次に、スクロールバーを追加するdivなどにmCustomScrollbar関数を呼び出します。

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

スクロールバーを適用したいdivなどに、

cssでoverflow:auto; または、overflow:hidden;

heightまたは、max-heightの指定をしてください。（もちろんテキストなどがはみ出すようにしないと意味がありません）

これが基本的な使い方になります。

簡単なカスタマイズ

先ほどの基本的な使い方にテーマをプラスしてあげることで複雑な設定なしで、私みたいな初心者でもカスタマイズできます。

例えば、こちらにあるようなデモを参考にテーマを選んで使うことができます。

デモ

使い方は、

こんな感じで、theme:"rounded-dots-dark"を付け加えます。

その他設定

かなり複雑といいますか豊富なオプションがあります。

時間がある方や自身のある方はお試しください。

jQuery custom content scrollerのサイトに細かな設定方法が書かれています。（英語なので翻訳が必要かな？）