デフォルトのスクロールバーを非表示にしてかっこいいスクロールバーを使えるようにするjQueryプラグインのご紹介です。
実はあまりデフォルトのスクロールバーは好きではないので、何かいいものが無いかと探していた時に見つけました。
その名もperfect-scrollbarです。
プロジェクトページはこちら
Githubはこちら
使い方
まず、サイトからZIPファイルをダウンロードします。
ZIPファイルを解凍したら、srcディレクトリ内にある下記の3ファイルを使用します。
- jquery.mousewheel.js
- perfect-scrollbar.js
- perfect-scrollbar.css
上記のファイルを使用したい箇所で読み込みます。
<link href="/css/perfect-scrollbar.css" rel="stylesheet" type="text/css"> <script src="/js/perfect-scrollbar.mousewheel.js"></script> <script src="/js/perfect-scrollbar.js"></script>
perfect-scrollbarを呼び出します。
<script type="text/javascript">
jQuery(function() {
jQuery("div#scroll").perfectScrollbar();
});
</script>
スクロールバーが必要なところに下記のようにCSSを設定します。
(必須のもののみ記述しています)
div#scroll
{
position : relative;
overflow : hidden;
width : 200px; // ココはお好みで
height : 200px; // ココもお好みで
}
実装のサンプルはこんな感じになります。
<!DOCTYPE html>
<html>
<head>
<title>perfect-scrollbarの実装サンプル</title>
<link href="/css/perfect-scrollbar.css" rel="stylesheet" type="text/css">
<script src="/js/perfect-scrollbar.mousewheel.js"></script>
<script src="/js/perfect-scrollbar.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery("div#scroll").perfectScrollbar();
});
</script>
<style type="text/css">
div#scroll
{
position : relative;
overflow : hidden;
width : 200px;
height : 200px;
}
</style>
</head>
<body>
<div id="scroll">
<ul>
<li>スクロール1</li>
<li>スクロール2</li>
<li>スクロール3</li>
<li>スクロール4</li>
<li>スクロール5</li>
<li>スクロール6</li>
<li>スクロール7</li>
<li>スクロール8</li>
<li>スクロール9</li>
</ul>
</div>
</body>
</html>
これでデフォルトのスクロールバーのデザインに悩まされずにすみますね！