覆盖打开后如何防止正文滚动？

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

正如之前提到的，这个想法是在弹出窗口打开时将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/

Answer 2

您的 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 时，sn-p 抛出错误，但它在我的服务器上运行良好，没有错误。我必须在iframe 中包含该示例，以显示弹出窗口在正文停止滚动时如何滚动。

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

Answer 3

我们可以在覆盖打开和关闭事件上添加/删除以下 css 类或样式到 body 标签。

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