Javascript 一旦覆盖打开，如何防止正文滚动？

我正在寻找一种方法，以防止身体滚动时，覆盖'弹出部分'被打开，并只允许滚动'弹出部分'div。我正在寻找一个解决方案使用javascript，但我不是很有经验的JS

有人有什么建议吗

$（“#切换菜单”）。单击（函数（）{
$（this.toggleClass（'active'）；
$（'.popup section'）.toggleClass（'open'）；
$（'html'）.toggleClass（'open'）；
});
$（'.popup section'）。单击（函数（）{
$（this.toggleClass（'active'）；
$（'.popup section'）.removeClass（'open'）；
$（'.button_container'）。removeClass（'active'）；
$（'html'）.removeClass（'open'）；
});
。弹出部分{
显示：无；
不透明度：0；
高度：100vh；
左：0；
右：0；
宽度：100vw；
溢出：滚动；
}
.popup-section.open{
显示：块；
不透明度：1；
z指数：99；
}
.弹出背景{
高度：100vh；
宽度：100vw；
背景色：#ccbcaf；
z指数：90；
光标：指针；
位置：固定；
溢出：滚动；
排名：0；
}
我们可以在覆盖打开和关闭事件的主体标记中添加/删除以下css类或样式

.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;
}

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

如前所述，其想法是在打开弹出窗口时将
溢出：隐藏
属性添加到
正文

Html:

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

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

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

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');
});

注意：90vh这只是一个示例，代表弹出窗口的大小。为了直观地看到哪个部分正在滚动，我把它缩小了。您可能需要一些其他值

Js:

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

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

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

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');
});

下面是一个工作示例：
可能重复的代码我们确实看不到您的代码所做的任何事情，因为它在运行时只是一个空白页。没有什么可以滚动或不滚动的。你能显示或链接到实际的工作页面吗？@glittergirl，我已经在codepen上运行了你的示例，并对其进行了一些更改。你能试试吗？谢谢你的回复！这是有效的，除非当我关闭覆盖时，主体不会再次滚动。你是否将反向代码添加到第二个函数中<代码>$（'html，body'）.css（{position:'relative'}）在
$（'.popup部分'）。单击（function（）
部分。这将停止修复正文。这就是我的示例再次开始滚动的方式。