iPhoneのSafariがposition:fixedをサポートしないため、画面上に固定のメニューを表示しようとしても、スクロールされた瞬間にコンテンツと一緒に流れていってしまいます(´・ω・｀)
これを回避する方法が下記にありました。
Fixed positioning in Mobile Safari
First, let’s recap why fixed positioning does not work off-the-bat. Mobile Safari uses a viewport to show you websites. Imagine a book in front of you. Take a piece of paper, cut a 320×416 square in it, and lay it over the book. To read the book, move the paper around and position the hole over the words you want to see. This is exactly what Mobile Safari’s viewport is doing. When you flick and scroll, you’re moving the viewport around while the website behind it stays static.
要は発想の転換でスクロールさせたくない部分のタッチイベントを殺しておき、スクロールさせたいエリアだけ自力でスクロールさせる訳ですね。なんという力技。
こちらのサンプルの場合では、ページを”ヘッダエリア”、”コンテンツ”、”フッタエリア”の3つに分けた上で、document.bodyのtouchmoveを殺しておきます。
[js]
document.body.addEventListener(”touchmove”, function(e) {
e.preventDefault();
}, false);
[/js]
その上で、
[js]
content.addEventListener(”touchstart”, function(e) {
content.addEventListener(”touchmove”, function(e) {
[/js]
でコンテンツエリアのタッチイベントをひろった後、content.style.webkitTransitionで移動させています。ちなみにこのサンプルでは、cubic-bezier（こちらのサンプルがわかりやすい）を指定することでスムーズなフリックの動きを実現しています。
いやぁ、頑張ればなんとかなるもんですね。
Comments are closed.