overflow:hiddenなどで スクロール禁止が出来ない時の対処法

スマートフォンなどでハンバーガーメニューを開いたときの動作の指定は、
様々あります。

横からスライドインするものや、上からプルダウンで降りてくるものなどがありますが、
今回は、メニューが画面全体に表示されて、その間ウェブサイトのスクロールはできないようにするものです。

その際、bodyに対してのOverflow:hiddenを指定すれば、pcやandroid端末で、スクロール禁止はできますが、
iosに対しては動作しません。

ブラウザ側のpassive というオプションが、デフォルトで設定されており、
このオプションがtrueであると、preventDefault(); が含まれていないとスクロールを許可してしまうため、
Over flowが効きません。

対処法は

上記のように記述することで解決が可能です。

この記事を見た人は次の記事も見ています。