iPhone / iPadなどでposition: fixedが利用できる「iScroll」
配布元: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 ライブラリ 製作補助系