Disable scrolling after toggle

Question

How can I disable scrolling on a whole page when I toggle the following:

$('#test').click(function() {
  $('html, body').css({
   overflow: 'hidden',
   height: '100%'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>
  <input id="test" type="checkbox">
  
  <span class="menu">
    <span class="hamburger"></span>
  </span>

  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</label>

Which doesn't seem to work.

Possible duplicate of [Just disable scroll not hide it?](https://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it) — Jann, Nov 11 '17 at 08:14
The code you've posted here works perfectly, you just don't see it do anything because there isn't enough content on the page for it to overflow the viewport. — Daniel Beck, Nov 11 '17 at 19:12

score 0 · Answer 1 · answered Nov 11 '17 at 14:03

I would seperate the CSS and javascript part, and use the checked value of the checkbox to enable/disable the scrolling:

$("#scrolltoggle").on("click", function(){
  if($(this).is(":checked")){
    $("body").addClass("noscroll");
  }else{
    $("body").removeClass('noscroll');
  }
});

.example {
  height: 400px;
  background: lightyellow;
}

.noscroll {
  overflow: hidden;
  background: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head></head>

<body>
  <div class='example'>
    <input type='checkbox' id='scrolltoggle'>Disable Scrolling
  </div>
</body>

Disable scrolling after toggle

1 Answers1