修正パターン(body固定方式)

下のボタンで利用規約モーダルを開き、規約末尾の氏名入力欄をタップしてキーボードを表示してください。その状態でページをスワイプしても、背景のスクロール位置は動きません。

このデモはモーダル表示中だけbodyをposition: fixedで固定しています。overflow: hiddenと違い、キーボード表示中やピンチズーム中でも背景のスクロール位置が動かず、モーダルを閉じると開く前と同じ位置に戻ります。実機のiPhone・iPadで確認してください。

セクション 1

ここは背景ページのコンテンツです。モーダル表示中はbodyごと固定されているため、暗い背景の上をどれだけスワイプしても、規約の末尾でスクロールが連鎖しても、このページは動きません。

セクション 2

背景ページのダミーコンテンツです。ページに高さを持たせるために置いています。

セクション 3

背景ページのダミーコンテンツです。ページに高さを持たせるために置いています。

セクション 4

背景ページのダミーコンテンツです。ページに高さを持たせるために置いています。