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

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

当您为导航栏切换 class 时，我认为您也为 body 元素切换 class 会更容易。因此，您可以将以下代码添加到您的项目中：

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

并创建一个名为 no-scroll:

的 CSS class

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

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

Prevent scrolling when mobile nav menu is open?

javascript

nav

responsive