[JS]設置も超簡単、あなたのウェブページのスクロールを慣性スクロールにするスクリプト -NiceScroll

マウスやキーボードでのスクロール操作を素早くやめるとスクロールの余韻がすこし残る慣性スクロールを簡単に実装できるjQueryのプラグインを紹介します。

適用範囲はページ全体だけでなく、ページの一部のdiv, iframe要素のみにも適用可能で、スクロールバーはiPhoneのようにスクロール時のみ表示されます。

jQuery NiceScroll plugin
デモページ

[ad#ad-2]

• NiceScrollのデモ
• NiceScrollの特徴
• NiceScrollの実装

NiceScrollのデモ

まずは、NiceScrollのサイトに適用されているデモからご紹介。

デモページ

スクロールはマウスのホイール操作でも、スクロールバーのドラッグでも可能で、素早く操作をするとスクロールは急に止まらず慣性スクロールになります。
キーボード操作にも対応しており、矢印キー、Home, End, PageUp, PageDownでも慣性スクロールします。

NiceScrollはページ全体だけでなく、div要素やiframe要素にも適用できます。

live demo: Simple scrollable div

div要素に適用したデモです。
配置している要素のためか、ページ全体より慣性スクロールが気持ちいいです。

live demo: Scrollable div (with wrapper div)

スクロールバーはカスタマイズも可能です。
また、ズーム機能も備えており、アイコンをクリックするとdiv要素内のコンテンツがズームします。

コンテンツをズーム表示したキャプチャ

live demo: IFrame

iframeを使ったデモです。
div要素と同様にスクロールバーのカスタマイズ、コンテンツのズームが可能です。

NiceScrollの特徴

• 既存のコードの修正無しで、簡単に設置ができます。
• ページのスペースを必要としないスクロールバーを設置できます。
• スクロールバーのデザインを変更できます。
• すべてのブラウザでマウス・キーボードでスクロールができます。
• スクロールは慣性スクロールに対応しており、スピードは調整可能。
• コンテンツのズーム機能。

対応ブラウザ

IE6を含めたデスクトップブラウザだけでなく、iPhone, iPadなどモバイルブラウザ、タッチデバイスに対応しています。

• Firefox 4+
• Chrome 5+
• Safari 4+ (win/mac)
• Opera 10+
• IE 6+
• iPhone, iPadなどのiOSデバイス

[ad#ad-2]

NiceScrollの実装

NiceScrollは、既存のページにも数行加えるだけで、簡単に設置ができます。

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>

JavaScrpt

スクロールを適用する範囲をjQueryのセレクタで指定します。
ページ全体に適用する場合は、「body」を指定します。

$(document).ready(
function() {
$("body").niceScroll();
}
);

div要素(#thisdiv)に適用し、スクロールバーのカラー(#00F)を変更します。

$(document).ready(
function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
}
);

スクリプトのオプション

スクリプトのオプションではスクロールバーのデザイン（カラー・不透明度・角丸・幅）、スクロールのスピード、ズームなどを設定できます。

• cursorcolor
• cursoropacitymin
• cursoropacitymax
• cursorwidth
• cursorborderradius
• zindex
• scrollspeed
• mousescrollstep
• touchbehavior
• hwacceleration
• boxzoom
• dblclickzoom
• gesturezoom