[JS]ブラウザでiPhoneのような滑らかスクロールを実現するスクリプト -Overscroll

デスクトップのブラウザでもiPhoneのような滑らかなアニメーションでコンテンツをスクロールさせるjQueryのプラグインを紹介します。

Overscroll
デモページ

[ad#ad-2]

Overscrollのデモ

デモではコンテンツを「Click+Drag」することで、滑らかスクロールでコンテンツを表示します。

デモページ

Overscrollの実装

デモを例に実装方法を紹介します。

HTML

スクロールするコンテンツに必要な箇所は「div id=screen」です。
デモでは初期状態ではオーバーレイ（div id=overlay）が表示され、フォーカスされるとスクリーンの箇所が表示されます。

<div id="ithing">
	<div id="screen">
		<img alt="loading..." src="/static/img/sfmap.jpg" />
	</div>
	<div id="overlay" class="font-geneva">
		<h3>Click + Drag</h3>
		<h4>to see the effect</h4>
	</div>
</div>

外部ファイル

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

<script src="jquery.js"></script>
<script src="jquery.overscroll.js"></script>

JavaScript

jQueryのセレクタで滑らかスクロールの箇所を指定します。

$(document).ready(function(){
    $("#screen", content).overscroll();
});

[ad#ad-2]