javascript - 覆盖打开后如何防止 body 滚动？

Question

我正在寻找一种方法来防止主体在打开覆盖“弹出部分”时滚动，并且只允许在“弹出部分”div 上滚动。我正在寻找使用 javascript 的解决方案，但是，我对 JS 不是很有经验

有人有什么建议吗？

    $('#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

您的 JQuery 实际上似乎大部分都在工作。弹出部分打开并滚动。要阻止下方的主体滚动，您可以将此行添加到现有的 JQuery 中:

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

或者，您可能更喜欢这样的效果:$('html, body').css({ overflow: 'hidden'});

如果你想撤销点击弹出部分的效果，你可以在你的下一个函数中反转它:

<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>