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>

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

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

body {
     width: 230px;
    }

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

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

    .popup-background {
      height: 100px;
      width: 200px;
      background-color: #ccbcaf;
      z-index: 90;
      cursor: pointer;
      position: fixed;
      overflow: scroll;
      top: 0;
    }
    
    span.top {
     background: yellow; 
     padding: 1.2rem; 
     border: 1px blue solid; 
     margin-bottom: 20px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="button_container open" id="toggle-menu">
<span class="top"><b>Toggle Menu: click</b></span>
<span class="bottom"><b></b></span>  
</div>
<br /> 

Some text in the body. Grapes crushed and ready for fermentation are called must. The world's oldest person – at one hundred twenty-two – attributed her longevity to a diet of olive oil, port wine and chocolate. Red wines are well attributed to positive health benefits. Cork it! In the unreliable summers of northern France, the acidity of under ripened grapes was often masked with chaptalization with unsatisfactory results, whereas now the less ripe grapes are made into popular sparkling wines.

Trichloroanisole in the cork can impart musty, mouldy overtones. Such a wine is called "corked." A good wine will have a lengthy aftertaste.

So many organic compounds are in wine. Unsubstantiated rumor states that the more colorful the label, the less quality the wine. Roll the wine around your mouth with your tongue and note the different flavors. Tannic, full-bodied wines are described as chewy. The principal acid in wine is tartaric acid. Tomato and cherry flavors nestle comfortably together with notes of leather and clay in Sangiovese.

The word "sauvignon" is believed to be derived from the French sauvage meaning "wild." Wine, women, and song – not necessarily in that order. Chinon is a town in France renowned for its winemaking. Monks and monasteries of the Roman Catholic Church have had an important influence on the history of Burgundy wine. Text from www.wineipsum.com

<div class="popup-section"> 
<div class="popup-background" title="">

Grapes crushed and ready for fermentation are called must. The world's oldest person – at one hundred twenty-two – attributed her longevity to a diet of olive oil, port wine and chocolate. Red wines are well attributed to positive health benefits. Cork it! In the unreliable summers of northern France, the acidity of under ripened grapes was often masked with chaptalization with unsatisfactory results, whereas now the less ripe grapes are made into popular sparkling wines.

Trichloroanisole in the cork can impart musty, mouldy overtones. Such a wine is called "corked." A good wine will have a lengthy aftertaste.

So many organic compounds are in wine. Unsubstantiated rumor states that the more colorful the label, the less quality the wine. Roll the wine around your mouth with your tongue and note the different flavors. Tannic, full-bodied wines are described as chewy. The principal acid in wine is tartaric acid. Tomato and cherry flavors nestle comfortably together with notes of leather and clay in Sangiovese.

The word "sauvignon" is believed to be derived from the French sauvage meaning "wild." Wine, women, and song – not necessarily in that order. Chinon is a town in France renowned for its winemaking. Monks and monasteries of the Roman Catholic Church have had an important influence on the history of Burgundy wine. Text from www.wineipsum.com

    </div>
   </div>

Answer 2

As it was mentioned the idea is to add overflow: hidden property to the body when popup is opened.

Html:

<button class="button">Open</button>

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

Css:

body.popup-open {
  overflow: hidden;
}

.popup-section{
  display: none;
  height: 90vh;
  width: 90vw;
  left: 0;
  right: 0;
  top: 0;
  right: 0;
  overflow: auto;
  position: fixed;
}

.popup-section.open {
  display: block;
}

.popup-background {
  height: 100vh;
  width: 100vw;
  background-color: #ccbcaf;
  cursor: pointer;
}

NOTE: 90vh it's just an example and is represents the size of the popup. I did it smaller in order to see visually which part is being scrolled. You might need some other value.

Js:

var button = $('.button');
var popup = $('.popup-section');
var body = $('body');

button.click(function() {
  popup.toggleClass('open');
  body.toggleClass('popup-open');
});

$('.popup-section').click(function() {
  popup.removeClass('open');
  body.removeClass('popup-open');
});

Here is working example: https://jsfiddle.net/uazc8jp5/

Answer 3

We can add/remove following css class or styling to body tag on overlay open and close events.

.popup-section {
  position: fixed; /* added */
  display: none;
  opacity: 0;
  height: 100vh;
  left: 0;
  right: 0;
  width: 100vw;
  overflow: hidden; /* changed */
}

.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; /* Removed */
  overflow: scroll;
  top: 0;
}

html.open body {
  overflow-y: hidden;
}