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

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

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

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

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

対処法は

■css
html, body{
  overflow: hidden;
}
■js
document.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false});

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