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

如何解决移动导航菜单打开时防止滚动？

我有一个从汉堡打开的简单导航菜单。虽然这是打开的，我怎样才能防止屏幕上的所有滚动？导航栏是 100vh，我想防止它在打开时滚动过去？

到目前为止导航菜单的 Js（没有滚动）

const navSlide = () => {
    const burger = document.getElementById('burger')
    const nav = document.getElementById('nav')
    const navLinks = document.querySelectorAll('.nav-links li')
    
    burger.addEventListener('click',() => {
        nav.classList.toggle('nav-active')
        navLinks.forEach( (link,index) => {
            if (link.style.animation) {
                link.style.animation = ''
            } else {
                link.style.animation = `navLinkFade 0.7s ease forwards ${index / 7 + 0.4}s`
                }
    })
    burger.classList.toggle('toggle')
  })
}

navSlide()

解决方法

在菜单打开时将 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...
})

并创建一个名为 no-scroll 的 CSS 类：

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