崩れるパターン(touchmoveをpreventDefault)

下のボタンで利用規約モーダルを開き、規約の本文を指でスクロールしてみてください。動かない、または指に張り付いてガクガクするはずです。

このデモは背景スクロール防止のために document への touchmove を preventDefault しています。PCではマウスホイールでスクロールできてしまうため、iPhoneのSafariで確認してください。

セクション 1

ここは背景ページのコンテンツです。モーダルの後ろにあるこのページが勝手にスクロールしないよう、touchmoveのpreventDefaultで止めています。背景を止めること自体は成功していますが、その代償としてモーダル内のスクロールまで止まっています。

セクション 2

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

セクション 3

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

セクション 4

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