iPhone / iPadなどでposition: fixedが利用できる「iScroll」

Check このエントリーをはてなブックマークに追加

配布元:iScroll
ライセンス:MIT-License

iPhone / iPad、Androidなどに搭載されているmobile WebKitではCSSのposition: fixedが利用できませんが、iScrollを利用することでこれらのプロパティを利用したようにヘッダーやフッターの固定が可能になります。

利用方法

まずは、head要素内などで配布サイトよりダウンロードしたライブラリ本体を読み込みます。

<script src="iscroll.js"></script>

HTMLでは次のようにコンテンツ部分をwrapperとscrollerというidをつけたdiv要素で包んでおきます。

<body> 
	<header id="header">ヘッダー部分</header>
	<div id="wrapper">
		<div id="scroller">
			コンテンツ部分
		</div>
	</div>
	<footer id="footer">フッター部分</footer>
</body>

#wrapperには次のようなCSSを適応させます。

#wrapper {
	position:relative;
	z-index:1;
	width:100% ;
	overflow:hidden;
}

#wrapperにはheightの指定も必要ですので次のようなスクリプトでheightを算出します。

function setHeight() {
	var headerH = document.getElementById('header').offsetHeight,
		footerH = document.getElementById('footer').offsetHeight,
		wrapperH = window.innerHeight - headerH - footerH;
	document.getElementById('wrapper').style.height = wrapperH + 'px';
}
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false);
function loaded() {
	setHeight();
}
document.addEventListener('DOMContentLoaded', loaded, false);

これにより#wrapperのheightが算出されます。

先ほど作成したloaded関数にiScrollの設定を追加し、touchmoveイベントを停止することでiScrollが利用可能になります。

var myScroll;
function loaded() {
	setHeight();
	myScroll = new iScroll('scroller', {desktopCompatibility:true});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

サンプル

スポンサードリンク

コメント

カテゴリー:Android iPad iPhone ライブラリ 製作補助系