【custom content scroller】スクロールバーのデザインを簡単に変更する方法

スポンサーリンク
HTML・JavaScript..

こんにちは、ハル@haru_elpisです。

ブラウザのスクロールバーのデザインを変更したい時に使える「custom content scroller」の紹介です。

custom content scrollerとは

custom content scrollerはブラウザのスクロールバーのデザインを変更できるjQueryプラグインです。
現在は-webkit-(chrome・safari)のみcssでデザイン変更できますが、その他のブラウザは対応していないので幅広く対応しているこのプラグインはかなり優秀なものとなっています。

ダウンロード

jQuery custom content scroller – malihu | web design

ダウンロードした「jquery.mCustomScrollbar.min.css」・「jquery.mCustomScrollbar.min.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<link rel='stylesheet' href='css/jquery.mCustomScrollbar.min.css' />
<script src='js/jquery.mCustomScrollbar.min.js'></script>

HTML

<body>
 <div class="scroll-area">
  <div class="scroll-content">
   ここに記述したものがスクロールで表示されます。
  </div>
 </div>
</body>

jQuery

<script>
(function($){
  $(".scroll-area").mCustomScrollbar();
})(jQuery);
</script>

オプション 自動スクロール

<script>
(function($){
  $(".scroll-area").mCustomScrollbar('scrollTo','0');
})(jQuery);
</script>

まとめ

スクロールバーのデザイン変更など、意外と使う事が多いかもしれません。簡単にオシャレに使う事ができるようになります。

おわりっ

コメント

タイトルとURLをコピーしました