如何使用Javascript防止移动菜单体滚动

我正在努力学习JavaScript，不知道还能去哪里。我用HTML和CSS创建了一个移动导航，并试图在移动导航打开时防止主体滚动

以下是问题的快照：

我试图创建一个javascript代码，这样当移动菜单处于活动状态时，主体滚动被隐藏，当它被卷起时，主体滚动是正常的。我希望有人能帮我创建一个if-else脚本来实现这个功能

以下是编写的HTML和CSS代码：

。内部菜单{
位置：固定！重要；
高度：300px！重要；
溢出：自动！重要；
背景色：#fff！重要；
z指数：-10！重要；
}
.移动菜单标签{
字体系列：劳拉！重要；
字体风格：斜体！重要；
字体重量：700！重要；
字体大小：18px！重要；
}
导航pbf{
保证金：0；
}
导航pbf:在{
内容：“；
显示：表格；
明确：两者皆有；
}
.切换+a，
.pbf下拉列表内容{
显示：无；
}
.切换{
显示：块；
颜色：#000；
文字装饰：无；
边框底部：1px实心#d8d8d8！重要；
文本对齐：居中！重要；
}
.toggle:悬停{}
[id^=drop]：选中+ul{display:block；}
导航pbf ul li{
显示：块；
宽度：100%；
}
导航pbf ul.开关，
导航pbf ul ul a{padding:0 40px；}
导航pbf ul a{填充：0 80px；}
导航pbf a:悬停，
导航pbf ul ul a{
背景色：#F8；
}
导航pbf ul li ul li.切换开关，
导航pbf ul ul a{
背景色：#e8e8e8；
字体系列：劳拉！重要
字体风格：斜体！重要；
字体大小：18px！重要；
字体重量：500！重要；
}
导航pbf ul{
浮动：无；
位置：静态；
颜色：#ffffff；
}
导航pbf ul li：悬停>ul，
导航pbf ul li:悬停>ul{显示：无；}
导航pbf ul li{
显示：块；
宽度：100%；
}
导航pbf ul li{位置：静态；
}
.pbf单链路{
字体系列：劳拉！重要；
字体风格：斜体！重要；
字体重量：700！重要；
字体大小：3vh！重要；
线高：60px！重要；
颜色：#000！重要；
}
内部菜单{
列表样式：无！重要；
显示：块；
浮动：左；
宽度：100%！重要；
}
内部菜单{
显示：块；
浮动：左；
宽度：100%；
边际：0px；
填充：0px；
}
.内接头{
显示：块；
浮动：左；
宽度：100%；
}
内部菜单{
列表样式：无！重要；
显示：块；
浮动：左；
宽度：100%！重要；
文字装饰：无！重要；
字体系列：Lora；
字体：斜体；
字体大小：16px；
线高：38px；
填充：0px1em；
边框底部：1px实心#d8d8；
右边框：1px实心#d8d8；
颜色：#3d3d；
}
.手机菜单{
浮动：无；
宽度：100%；
填充：0px；
高度：10vh！重要；
线路高度：10vh！重要；
}
.移动菜单.选项卡{
位置：相对位置；
颜色：#fff；
溢出：隐藏；
}
.移动菜单输入{
位置：绝对位置；
不透明度：0；
z指数：-1；
}
.移动菜单标签{
位置：相对位置；
显示：块；
填充：0.1em；
字体大小：粗体；
光标：指针；
页边距底部：0px！重要；
文本对齐：左对齐；
字体大小：3vh！重要；
线路高度：10vh！重要；
文本对齐：右对齐；
}
.移动菜单.选项卡内容{
最大高度：0；
溢出：隐藏；
背景：#fff；
-webkit过渡：最大高度.2s；
-o型过渡：最大高度2秒；
过渡：最大高度.2s；
}
.移动菜单.选项卡内容p{
边缘：1米；
}
/*：选中*/
.移动菜单输入：选中~.选项卡内容{
最大高度：无；
过渡：最大高度.2s；
位置：固定；
z指数：9999999！重要；
宽度：100%！重要；
左：0px；
顶部：16vh；
}
@介质（最大宽度：1024px）{
.faq手风琴标签{
填充：4%12%4%5%；
字体大小：14px！重要；
线高：20px！重要；
}
#标题。标题顶部。菜单顶部{
显示：无！重要；
}
.主要内容{
显示：块；
浮动：左；
宽度：100%；
}
.template collection div#secondary{
显示：无；
}
.面包屑{
边际顶部：0px！重要；
}
.grid\u项目{
宽度：90%！重要；
左缘：5%；
}
.手机菜单{
显示：内联块！重要；
}
.仅限桌面{
显示：无；
}
.仅限手机{
显示：块；
}
#顶栏。凭单{
显示：无！重要；
}
顶杆容器{
宽度：100%！重要；
填充：0%0%！重要；
}
.通讯.文本{
显示：块；
浮动：左；
宽度：100%！重要；
}
.通讯.文本h3{
显示：块；
浮动：左；
宽度：100%！重要；
字体大小：32px！重要；
线高：33px！重要；
填充顶部：15px；
}
#topbar.accounts部分{
显示：块；
浮动：左！重要；
宽度：50%！重要；
高度：6vh！重要；
右边框：1px实心#0b3254；
文本对齐：居中！重要；
}
#顶杆，左顶杆{
宽度：70%；
右边距：0px！重要；
}
#顶栏{
高度：自动！重要；
显示：块；
宽度：100%；
}
.图标菜单手机{
显示：内联块！重要；
}
.icon-menu-mobile.active>.navbar导航{
显示：块！重要；
}
.订购span.col{
显示：无；
}
订单{
显示：块；
浮动：对；
边际顶部：0px！重要；
}
.订购{
边际顶部：0px！重要；
}
.products.grid\u full.item inner、.products.grid\u full.grid\u侧栏.item inner{
宽度：50%；
}
.订购p.结果计数{
显示：块；
浮动：对；
宽度：100%；
利润率最高：5%；
}
.订购量清单{
显示：块；
浮动：左；
高度：36px；
宽度：36px；
}
input.btn.link-button.wpcf7-form-control.wpcf7-submit{
背景色：#aac02c；
宽度：100%；
颜色：#fff；
}
.图标菜单{