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

Question

我有一个从汉堡打开的简单导航菜单。当它打开时，如何防止屏幕上的所有滚动？导航栏是 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()

Answer 1

当菜单打开时添加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：

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