How to prevent body scrolling once overlay is open?

Question

I am looking for a way to prevent the body from scrolling when the overlay 'popup-section' is opened and to only allow scrolling on the 'popup-section' div. I am looking for a solution using javascript, however, I am not very experienced in JS

Does anyone have any suggestions?

    $('#toggle-menu').click(function() {
      $(this).toggleClass('active');
    $('.popup-section').toggleClass('open');
      $('html').toggleClass('open');
    });

    $('.popup-section').click(function() {
      $(this).toggleClass('active');
    $('.popup-section').removeClass('open');
      $('.button_container').removeClass('active');
      $('html').removeClass('open');
    });

    .popup-section{
      display: none;
      opacity: 0;
      height: 100vh;
      left: 0;
      right: 0;
      width: 100vw;
	  overflow: scroll;
    }

    .popup-section.open {
      display: block;
      opacity: 1;
	  z-index: 99;
    }

    .popup-background {
      height: 100vh;
      width: 100vw;
      background-color: #ccbcaf;
      z-index: 90;
      cursor: pointer;
	  position: fixed;
	  overflow: scroll;
      top: 0;
    }

    <div class="button_container open" id="toggle-menu">
      <span class="top"></span>
	  <span class="bottom"></span>  
    </div>

    <div class="popup-section">
    <div class="popup-background" title="">
	  <!--CONTENT-->
    </div>
    </div>

Answer 1

Your JQuery actually seems to be mostly working. The popup-section opens and scrolls. To stop the body underneath from scrolling, you can add this line to your existing JQuery:

$('html, body').css({ position: 'fixed'});

Or, you might prefer the effect of this instead: $('html, body').css({ overflow: 'hidden'});

If you want to undo the effect on clicking the popup section, you can reverse it in your next function:

<script>
    $('#toggle-menu').click(function() {
    $(this).toggleClass('active');
    $('.popup-section').toggleClass('open');
    $('html').toggleClass('open');
    $('html, body').css({ position: 'fixed'}); //stops body scroll
    });

    $('.popup-section').click(function() {
    $(this).toggleClass('active');
    $('.popup-section').removeClass('open');
    $('.button_container').removeClass('active');
    $('html').removeClass('open');
    $('html, body').css({ position: 'relative'}); //restarts body scroll
    });
</script>

The snippet was throwing an error when I used JQuery, but it works great on my server with no errors. I had to include the example in an iframe just to show how the popup scrolls while the body stops scrolling.

<iframe src = "https://www.scriptbarrel.com/examples/popup.htm">
</iframe>