今作成中のWebサイトにおいて、CSSのposition: fixedを使用して擬似フレーム的なのを作っています。というか僕自身がフレームが好きで、よくfixedを使用します。
で、最近気にしなくてはならなくなってきたのがやはりスマホですが、どうやらAndroidではposition: fixedが対応しておらず、まともに表示されないんですね。
僕の使っている携帯端末が丁度Androidなので確認しましたが、まさに上手く表示されませんでした。
ちなみにiOSは5からはposition: fixedに対応しているようです。
で、対応していない端末対策として、JavaScriptを使用して実装する方法があるようです。
それが"iScroll 4"
公式サイトはこちら
サンプルはこちら
実装例
<head>
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('contents');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
<style type="text/css" media="all">
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
}
#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>Sample</header>
<div id="contents">
本文
</div>
<footer></footer>
</div>
</body>
赤字で示している部分にスクロールさせたい箇所のidを入れるわけですね。
青字のcontentsを入れて、ヘッダーとフッターは固定されて、コンテンツのみがスクロールするという形です。
他にも色々出来るようです。サイトからダウンロードした際に、iScroll 4本体とは別に、複数のサンプルのHTMLファイルが入ってますので、それを参考にすると作りやすいかと思います。
ネットサーフィンもスマホが主流の時代なので、スマホでの表示も確認が必要ですね。
まぁいずれはAndroidもfixedに対応するでしょうから、レガシー対応的なものになりそうですが。
0 件のコメント:
コメントを投稿