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

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

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

サイトのキャプチャ

jQuery NiceScroll plugin
デモページ

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デバイス

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

top of page

©2017 coliss