Question

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

有人有什么建议吗？

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

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

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

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>

当我使用JQuery时，该代码段引发了错误，但是它在我的服务器上运行良好，没有错误。我不得不将示例包含在iframe中，只是为了显示弹出式菜单在正文停止滚动时如何滚动。

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

Answer 2

我们可以在叠加打开和关闭事件中向body标签添加/删除以下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;
}

Answer 3

如前所述，其想法是在打开弹出窗口时向overflow: hidden添加body属性。

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

注意：90vh只是一个示例，它代表弹出窗口的大小。我做得较小，以便直观地看到正在滚动的部分。您可能还需要一些其他值。

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

这是工作示例： https://jsfiddle.net/uazc8jp5/

一旦覆盖层打开，如何防止身体滚动？

3 个答案: