How to prevent body scrolling once overlay is open?

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>

from How to prevent body scrolling once overlay is open?