一旦疊加打開，如何防止身體滾動？

Question

我正在尋找一種方法來防止身體在打開覆蓋'popup-section'時滾動，並且只允許在'popup-section'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>

當我使用JQuery時，該片段引發了錯誤，但它在我的服務器上運行良好，沒有錯誤。 我必須在iframe包含該示例，以顯示當主體停止滾動時彈出窗口如何滾動。

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

Answer 2

我們可以在疊加打開和關閉事件上添加/刪除以下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;
}

Answer 3

正如提到的那樣，想法是在打開彈出窗口時向body添加overflow: hidden屬性。

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/