スキップナビゲーションリンク

css iPhone・iPad対策版 表示エリア固定ブロック(position:fixed) with iScroll

動作対象環境

仕様

動作サンプル

サンプルのみを別窓で表示

サンプルダウンロード

サンプルダウンロード

解説

ブラウザウィンドウの表示エリア内の、任意の位置に固定されて表示するブロックは、cssの「position」プロパティの値を「fixed」に設定することによって実装するのが最も安定した方法だが、IE6とiPhone、iPadなどでは「position:fixed」に対応しておらず、正しい表示結果が得られない。

IE6向けには、cssハックによってIE6以下に最適化したセレクタに対して「position:absolute」とexpressionを付与し、これを固定表示したいブロックに設定する。

iPhone、iPadなどのmobile safari向けには、JavaScriptで制御する。iScrollはこのような用途に最適なJSライブラリである。
設定のアプローチはcssとは逆で、固定したいもの以外がひとつのブロックに収まる構造になるようマークアップし、そのブロックがフィンガードラッグやフリックに反応してスクロールするように、JavaScriptを記述する。