on:2011年11月9日sponsorsマウスやキーボードでのスクロール操作を素早くやめるとスクロールの余韻がすこし残る慣性スクロールを簡単に実装できるjQueryのプラグインを紹介します。iframe要素のみにも適用可能で、スクロールバーはiPhoneのようにスクロール時のみ表示されます。pluginデモページ[ad#ad-2]NiceScrollのデモNiceScrollの特徴NiceScrollの実装NiceScrollのデモまずは、NiceScrollのサイトに適用されているデモからご紹介。デモページスクロールはマウスのホイール操作でも、スクロールバーのドラッグでも可能で、素早く操作をするとスクロールは急に止まらず慣性スクロールになります。PageDownでも慣性スクロールします。NiceScrollはページ全体だけでなく、div要素やiframe要素にも適用できます。divdiv要素に適用したデモです。配置している要素のためか、ページ全体より慣性スクロールが気持ちいいです。div)スクロールバーはカスタマイズも可能です。ズーム機能も備えており、アイコンをクリックするとdiv要素内のコンテンツがズームします。IFrameiframeを使ったデモです。div要素と同様にスクロールバーのカスタマイズ、コンテンツのズームが可能です。既存のコードの修正無しで、簡単に設置ができます。ページのスペースを必要としないスクロールバーを設置できます。スクロールバーのデザインを変更できます。すべてのブラウザでマウス・キーボードでスクロールができます。スクロールは慣性スクロールに対応しており、スピードは調整可能。コンテンツのズーム機能。iPadなどモバイルブラウザ、タッチデバイスに対応しています。iPadなどのiOSデバイス[ad#ad-2]NiceScrollの実装NiceScrollは、既存のページにも数行加えるだけで、簡単に設置ができます。外部ファイル「jquery.js」と当スクリプトを外部ファイルとして指定します。src="js/jquery.nicescroll.min.js"></script>JavaScrptスクロールを適用する範囲をjQueryのセレクタで指定します。ページ全体に適用する場合は、「body」を指定します。{$("body").niceScroll();});div要素(#thisdiv)に適用し、スクロールバーのカラー(#00F)を変更します。)、スクロールのスピード、ズームなどを設定できます。