使用Java禁用和启用滚动

Question

我一直在尝试找到一种解决方案，以从同一元素使用Javascript启用/禁用滚动功能，但是我没有找到任何适合我的方法。

在我的脑海中，我想创建一个if语句，当单击汉堡包图标时触发onclick，并且我看到要禁用滚动的菜单，否则我想返回滚动效果，因为我再次单击了汉堡包图标。

到目前为止，我发现的唯一一件事就是仅禁用了滚动，但是我无法将滚动带回。

有办法实现吗？

的HTML

<nav>
  <div class="hamburger">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <ul class="nav-links">
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#inline">Contact</a>
    </li>
  </ul>
</nav>
<section>
<p class="par">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida neque ac egestas venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pharetra purus libero, vestibulum vulputate mauris tristique et. Cras auctor hendrerit mi sed pharetra. Ut convallis dolor vel vestibulum tristique. Sed feugiat metus ut euismod rutrum. Aenean eu nulla mattis felis aliquam placerat nec quis nunc. In aliquam ornare diam, non faucibus massa semper sed. Curabitur id tellus diam.

Duis lorem nunc, varius a orci ut, interdum gravida mi. Proin blandit purus eu dolor mattis faucibus. Praesent mauris dolor, maximus ac ipsum vel, auctor suscipit diam. Nullam non cursus felis. Ut lobortis lacus facilisis molestie tempus. Duis in enim vel mi posuere consectetur vel eu sem. Aliquam pretium condimentum metus in euismod. Duis sed luctus mi. Nunc iaculis suscipit mi, at dictum neque euismod ac. Praesent diam tellus, elementum id ultricies aliquet, efficitur nec dui. Nullam ut sodales elit.

Curabitur suscipit rutrum ligula a consequat. Suspendisse iaculis urna nec rutrum tristique. Phasellus et dui arcu. Donec finibus sagittis venenatis. Donec eu mauris augue. Morbi vitae ligula imperdiet ligula malesuada bibendum in sit amet nibh. Nunc a urna odio. Nam posuere justo ut turpis finibus, ac cursus leo suscipit. Proin lectus justo, finibus auctor faucibus eget, sodales ac tortor. Nam ut ligula mollis, vulputate orci eget, commodo justo. Proin sagittis, ante et iaculis pretium, sapien eros tristique risus, sed imperdiet risus leo laoreet mauris.

Nulla eros arcu, commodo in cursus nec, commodo ut sem. Proin dapibus nunc metus, id efficitur arcu pretium quis. Etiam ut felis vestibulum magna malesuada fringilla eu ac felis. Fusce ac ex arcu. Nam nec dapibus nulla. Aenean eu tincidunt velit. Curabitur eget felis eros. Fusce vitae efficitur nisl. Nam eu facilisis nibh. Sed cursus interdum ex vel tempus. Proin fermentum lacinia ligula, rutrum iaculis magna varius eget. Sed nec auctor purus. Donec viverra, est a volutpat pharetra, tortor lectus sodales erat, a scelerisque enim lectus nec ante. Nullam eu tristique lorem, ut dignissim neque. Aliquam in ipsum iaculis justo gravida sagittis id at felis. Vestibulum iaculis facilisis quam at eleifend.
</p>
</section>

的CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #191818;
  color: blue;
}

nav {
  height: 10vh;
}
.par {
  line-height:2rem;
}
.nav-links {
  display: flex;
  list-style: none;
  width: 30%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
}
.nav-links li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

@media screen and (max-width: 768px) {

  .line{
    width: 30px;
    height: 3px;
    background: white;
    margin: 5px;
  }
  nav{
    position: relative;
  }
  .hamburger {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
  }
  .nav-links {
    position: fixed;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    transition: all 1s ease-out;
    pointer-events: none;
  }
 .nav-links.open {

    pointer-events: all;
  }
  .landing {
    flex-direction: column;
  }
  .nav-links li {
    opacity: 0;
  }
  .nav-links li a {
    font-size: 25px;
  }
  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }
  li.fade{
    opacity: 1;
  }
}

JS

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");

hamburger.addEventListener('click', () => {
    navLinks.classList.toggle("open");
    links.forEach(link =>{
        link.classList.toggle("fade");
    })

    function noScroll() {
        window.scrollTo(0, 0);
    }
    window.removeEventListener("scroll", noScroll);
    window.addEventListener("scroll", noScroll); 
});

Answer 1

• 删除滚动JS
• 相反，为针对您的内容的CSS类创建一个切换，您只需打开和关闭一个no-scroll类即可
• 让CSS处理滚动逻辑： 防止正文滚动，但允许覆盖滚动