导航菜单下的页面正在滚动

Question

我用html、css和JavaScript创建了一个响应式导航栏。当页面宽度小于768px时，将显示条形图标，单击该图标时，将显示导航菜单。问题是当导航菜单出现时，页面仍在后台滚动。导航菜单下的滚动应该停止。

null

    const button1 = document.getElementsByClassName("button")[0];
    const navLinks1 = document.getElementsByClassName("navLinks")[0];
    button1.addEventListener('click', () => {
        navLinks1.classList.toggle('active')
    })

* {
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Prompt', sans-serif;
}

.logo {
    display: block;
    padding: 1rem;
    color: whitesmoke;
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: blueviolet;
    z-index: 5;
}

nav ul {
    display: flex;
}

nav ul li a {
    padding: 1rem;
    display: block;
    color: whitesmoke;
}

nav ul li a:hover {
    background-color: rgb(48, 0, 94);
}

.button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: none;
    color: whitesmoke;
}

.content {
    margin-top: 5rem;
    text-align: center;
}

@media screen and (max-width: 786px) {
    .button {
        display: block;
        font-size: 2rem;
    }
    nav {
        flex-direction: column;
    }
    .navLinks {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        margin-top: 2rem;
    }
    .navLinks.active {
        display: flex;
        height: 100vh;
    }
}

<header>
    <nav>
        <div class="logo">Logo</div>

        <a href="#" class="button" id="btn"><i class="fa fa-bars"></i></a>

        <ul class="navLinks">
            <li><a href="#" class="key1" id="active">Home</a></li>
            <li><a href="#" class="key2">About</a></li>
            <li><a href="#" class="key3">Blog</a></li>
            <li><a href="#" class="key4">Contact</a></li>
        </ul>

    </nav>
</header>

    <div class="content">
        <h1>Content</h1>
        <h2>More content</h2>
    </div>

    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content
    <br> <br> <br> Content

null

Answer 1

在菜单打开时向主体添加类,如下所示：

document.body.classList.toggle("active");

还要将溢出：隐藏；添加到其中...

body.active {
  overflow: hidden;
}

null

const button1 = document.getElementsByClassName("button")[0];
const navLinks1 = document.getElementsByClassName("navLinks")[0];
button1.addEventListener('click', () => {
  navLinks1.classList.toggle('active');
  document.body.classList.toggle("active");
})

* {
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Prompt', sans-serif;
}

body.active {
  overflow: hidden;
}

.logo {
  display: block;
  padding: 1rem;
  color: whitesmoke;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: blueviolet;
  z-index: 5;
}

nav ul {
  display: flex;
}

nav ul li a {
  padding: 1rem;
  display: block;
  color: whitesmoke;
}

nav ul li a:hover {
  background-color: rgb(48, 0, 94);
}

.button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: none;
  color: whitesmoke;
}

.content {
  margin-top: 5rem;
  text-align: center;
}

@media screen and (max-width: 786px) {
  .button {
    display: block;
    font-size: 2rem;
  }
  nav {
    flex-direction: column;
  }
  .navLinks {
    display: none;
    flex-direction: column;
    width: 100%;
    text-align: center;
    margin-top: 2rem;
  }
  .navLinks.active {
    display: flex;
    height: 100vh;
  }
}

<header>
  <nav>
    <div class="logo">Logo</div>

    <a href="#" class="button" id="btn"><i class="fa fa-bars"></i></a>

    <ul class="navLinks">
      <li><a href="#" class="key1" id="active">Home</a></li>
      <li><a href="#" class="key2">About</a></li>
      <li><a href="#" class="key3">Blog</a></li>
      <li><a href="#" class="key4">Contact</a></li>
    </ul>

  </nav>
</header>

<div class="content">
  <h1>Content</h1>
  <h2>More content</h2>
</div>

<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content
<br> <br> <br> Content