Javascript 移动导航菜单打开时是否防止滚动？

我有一个简单的导航菜单从汉堡打开。当此选项打开时，如何防止屏幕上的所有滚动？导航栏是100vh，我想防止它打开时滚动过去

到目前为止，导航菜单的Js（没有用于滚动的内容）

---

打开菜单时，将

overflow-y:hidden

添加到

body

元素，关闭菜单时将其删除

打开时：

document.body.style.overflowY = 'hidden';

关闭时：

document.body.style.overflowY = 'visible';

编辑：

您可以使用上述示例，如：

document.body.style.overflowY = document.body.style.overflowY === 'hidden' ? 'visible' : 'hidden'; // if current styling is *hidden* then change to visible, otherwise change to hidden

在切换导航栏的类时，我认为切换

body

元素的类也会更容易。因此，您可以向项目中添加以下代码：

burger.addEventListener('click', () => {
  document.body.classList.toggle('no-scroll')
  nav.class...
})

并创建一个名为

无滚动的CSS类

：

.no-scroll {
  overflow-y: hidden;
}

---

谢谢你，我已经试过了，但它不起作用！我应该把这个放在代码的什么地方？或者创建一个新的侦听器？@DanWilstrop您需要将它插入到您已有的事件侦听器中，但是您需要检查是否已经有类附加到

body

。因此，我认为如果您使用我添加到答案中的方法将CSS类附加到

body

，会更容易。非常感谢。我需要在类中添加position:fixed和overflow:y，但这非常有效！谢谢你的帮助

.no-scroll {
  overflow-y: hidden;
}