Disable and Enable Scrolling with Javascript

Question

I've been trying to find a solution to enable/disable scrolling with Javascript from the same element but I haven't find anything that worked for me.

In my mind I want to create an if statement that triggers onclick when the hamburger icon is clicked and I see the menu I want to disable the scrolling else I want the scroll effect back since I click again the hamburger icon.

So far the only thing that I have found is only to disable the scroll but I cant bring the scroll back.

Is there a way to achieve that?

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); 
});

score 0 · Answer 1 · answered Nov 25 '19 at 02:55

0

remove the scrolling JS
instead, create a toggle for a css class that targets your content, you'd just toggle a no-scroll class on and off
let css handle the scrolling logic: Prevent body scrolling but allow overlay scrolling

answered Nov 25 '19 at 02:55

sodevious

45
2

also, you are missing a closing `}` at the bottom of your css – sodevious Nov 25 '19 at 02:56
Is there a way to not remove the Javascript file? – Lazos Pap Nov 25 '19 at 13:31
keep the JS file itself, just take out those few lines for the noScroll function, you don't need it as CSS can accomplish this with less overhead – sodevious Nov 25 '19 at 19:41
I just add the line you had in my js file and put the CSS overflow rule you had and it worked like charm thanks. Damn it was so simple that I confused my thoughts. – Lazos Pap Nov 25 '19 at 22:55

Disable and Enable Scrolling with Javascript

1 Answers1