ある要素を絶対位置指定で固定表示をすることを可能にするposition:fixed;というプロパティがあります。

ページ上に一枚レイヤーを重ねるような形で、メニューやモーダルなどのコンテンツを全画面表示させる場合などに用いられますが、その際にある条件を満たすと、iOSのSafariで絶対位置で指定した要素内をスクロール出来ない事象が発生してしまいます。

実案件でこの事象に遭遇したので、備忘録を兼ねて共有します。

発生する条件

具体的には以下の条件を満たすと、スクロールが出来なくなってしまうようです。

発生環境

iOS9 Safari（他バージョンは未確認）

発生条件

• positionプロパティにabsoluteかfixedを指定している
• heightプロパティとoverflowプロパティを指定している
• -webkit-overflow-scrollingプロパティにtouchを指定している

対処法

対処法としてpositionプロパティを指定する要素と、height・overflowプロパティをしている要素を別々にすることでスクロールが可能となります。

以下に実装例をご紹介します。

See the Pen dXwLGg by Glatch (@glatch) on CodePen.

今回の場合、.header__naviにposition: fixedを指定し、.header__navi__innerにheightとoverflowを指定しています。

div要素を余計に一つ挟まなくてはならないのがデメリットですが、こうすることで絶対指定した要素もスクロールさせることが可能です。