【js,css】ハンバーガーメニューの裏側のコンテンツのスクロールを止めたい

Question

前提・実現したいこと

以下のサイトの方法でハンバーガーメニューを作成したのですが、
こちらでも再現する通り、メニューを開いてボタン以外の部分を触ると
裏側のコンテンツがスクロールしてしまいます。（iPhoneSEで確認）
スクロールしないようにしたいのですが、jsに不慣れでうまく修正できない状態です。
可能であれば別のハンバーガーメニューを紹介いただくのではなくて、
こちらのハンバーガーメニューを改修する形でアドバイスをいただけると大変嬉しいです。
よろしくお願いします。

https://coco-factory.jp/ugokuweb/move01/5-1-15/

発生している問題・エラーメッセージ

メニューの裏側のコンテンツが動かせてしまう

エラーメッセージ

特になし

該当のソースコード

javascript

試したこと

メニューを開いた時にbodyとhtmlにcssを追加、
メニューを閉じた時にcssを削除
などはしてみました。

色々試したので明確に覚えていませんが、
以下などの内容だったと思います。
height: '100vh',
overflow: 'hidden',
position: 'fixed',

ただ、裏側の固定ができても
メニューを閉じるとページの上部に移動してしまうため、
諦めました…

補足情報（FW/ツールのバージョンなど）

coco-factoryのソースではopacityを使用していますが、
裏側のコンテンツのリンクが効かなくなったため
visibilityを代用しています。