Mon, August 29, 2016

スマートフォン(iPhone / Android)でposition: fixedを実現する方法「iScroll.js」

スマートフォンで非対応(仕様のようです)のposition: fixedですが、「iScroll」使って実現することが出来ます。

■iScroll

デモはこちら(PCでは機能しません)

■使い方

ダウンロードしたiscroll.jsを読み込み、headに下記scriptを記述。
wrapperの縦幅を検出、touchmoveイベントの停止などをしています。

<script>
	var myScroll;
	var a = 0;
	function loaded() {
		setHeight();
		myScroll = new iScroll('scroller', {desktopCompatibility:true});
	}
	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);
	document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
	document.addEventListener('DOMContentLoaded', loaded, false);
</script>
HTML部分

コンテンツ部分(スクロール範囲)を#wrapper、#scrollerで囲みます。

<body>
<header id="header">ヘッダー(固定)</header>
<div id="wrapper">
	<div id="scroller">
		コンテンツ部分(スクロール範囲)
	</div>
</div>
<footer id="footer">フッター(固定)</footer>
</body>
CSS部分

#wrapperに対して下記CSSを適応。

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

 

以上で導入完了です。

 

参考サイト:iPhone / iPadなどでposition: fixedが利用できる「iScroll」-JavaScript Library Archive

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree