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

投稿日：2017年9月12日

カスタムスクロールバー

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の指定をしてください。（もちろんテキストなどがはみ出すようにしないと意味がありません）

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

簡単なカスタマイズ

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

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

デモ

スクロールバーデモ

使い方は、

<script>
(function($){
$(window).on("load",function(){
$(".contents-sample").mCustomScrollbar({
theme:"rounded-dots-dark"
});
});
})(jQuery);
</script>