こんにちは、ハル@haru_elpisです。
ブラウザのスクロールバーのデザインを変更したい時に使える「custom content scroller」の紹介です。
custom content scrollerとは
custom content scrollerはブラウザのスクロールバーのデザインを変更できるjQueryプラグインです。
現在は-webkit-(chrome・safari)のみcssでデザイン変更できますが、その他のブラウザは対応していないので幅広く対応しているこのプラグインはかなり優秀なものとなっています。
ダウンロード
jQuery custom content scroller – malihu
| web design
manos.malihu.gr
ダウンロードした「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>
まとめ
スクロールバーのデザイン変更など、意外と使う事が多いかもしれません。簡単にオシャレに使う事ができるようになります。
おわりっ
コメント