jQueryのCustom Scrollbarを使ってスムーススクロールを実現する方法

  • このエントリーをはてなブックマークに追加
  • LINEで送る

スクロールバーをかっこ良くカスタマイズ出来るCustom Scrollbar.

Custom Scrollbar

すごく便利なのですが、これを使うとスムーススクロールが上手くできないという症状に出くわしました。

色々なプラグインを試したのですが、結局スムーススクロールは無理かと思ったのですが、別途プラグインを入れることなく、Custom Scrollbar単体でスムーススクロールを実現することができました。

実装の流れ

Custom Scrollbarについては他で沢山紹介されているので詳しい導入に関してはそちらをご参照ください。

流れとしては下記のようにhead部にオフィシャルサイトからダウンロードしてきたcssとjsを読み込ませ、その後実行するアクションを別途記載する流れになります。

head部に必要要素を読み込み

<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.mCustomScrollbar.js"></script>

ページ内スクロールするためのコードを書く

<script type="text/javascript">
(function($){
        $(window).load(function(){
            $("クリックする箇所のID").click(function(e){
                    e.preventDefault();
                    $("移動先大元のID").mCustomScrollbar("scrollTo","飛び先のID");
                });        

})(jQuery);

参照サイト

オフィシャルサイト
jQuery custom scrollbar demo
Custom Scrollbar …

スクロールバーをデザインするのに使えるjQueryプラグイン「Custom Scrollbar」 | Web活メモ帳

Custom Scrollbar | ハチログ

あとがき

さんざん寄り道して結局本家の英語マニュアル読みましたよ(´・ω・`)

やっぱめんどくさがっちゃいかんね。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*