在弹出窗口打开时防止正文滚动答案

【问题标题】：Prevent body from scrolling when a Pop-Up is open在弹出窗口打开时防止正文滚动
【发布时间】：2018-04-01 15:33:37
【问题描述】：

首先，我知道同样的问题已经被问过好几次了，但我无法让它正常工作。在我实施的网站上，我打开一个包含一些信息的弹出窗口，然后阻止身体的其余部分滚动。我想允许滚动弹出窗口但不允许滚动菜单。还要避免在正文上使用“位置：固定”，因为它将页面移动到顶部。为了防止身体滚动，我错过了什么？身体已经有属性“溢出：隐藏”。这是我开发的代码：

http://www.produccionsf2f.com/equipo/

HTML：

覆盖身体的覆盖物：

<div id="scid-overlay" class="x-section scid-transition-eio overlay-open" style="margin: 0px;padding: 0px; background-color: hsla(0, 0%, 1%, 0.69);"><div class="x-container max width" style="margin: 0px auto;padding: 0px;height: 0;">

实际弹出窗口：

<div id="scid-overlay" class="x-section scid-transition-eio overlay-open" style="margin: 0px;padding: 0px; background-color: hsla(0, 0%, 1%, 0.69);">

JS：

jQuery(function($){
      var overlay = $('#scid-overlay');
    var visiblePanel;

    $(".scid-hook-link").click(function(event){
        openPanel(event);
    });

     $('.scid-close-button').click(function(event) {
         closePanel(event);
     });

     overlay.click(function(event) {
         closePanel(event);
     });

    function openPanel(event){
      event.preventDefault();

      var id = $(event.target).attr('id').replace('hook', 'popup');
      $(event.target).closest('figure').addClass(' scid-popup');
      document.querySelector('#' + id).className += (' scid-panel-open');
      overlay.removeClass('overlay-close');
      overlay.addClass('overlay-open');
      sizePanel(id);

      window.location.hash = "#" + id;
      visiblePanel = document.querySelector('.scid-panel-open');
    };

    function closePanel(event){
      if(event){
        event.preventDefault();
      }

      if(visiblePanel) {
        var id = visiblePanel.id;
        console.log(id)
        console.log(visiblePanel);
        document.querySelector('.scid-popup').classList.remove('scid-popup');
        visiblePanel.classList.remove('scid-panel-open');
        overlay.removeClass('overlay-open');
        overlay.addClass('overlay-close');
        sizePanel(id);        
      }

    }

    function sizePanel(id) {
      var panel = document.querySelector( '#' + id);
      if (panel.offsetHeight == 0) {
          panel.style.height = panel.scrollHeight + 'px';
      } else {
          panel.style.height = 0 +'px';
          window.location.hash = "";
            visiblePanel = null;
      }
    };

    window.onhashchange = function() {
    if(visiblePanel && window.location.hash != '#' + visiblePanel.id){
      closePanel();
    }
  }
});

CSS：

.overlay-close {
    height: 0;
    opacity: 0;
}
.overlay-open {
    height: 100%;
    opacity: 1
    overflow: scroll;
    overflow-y: auto;
    visibility: visible;
    z-index: 69;
}

【问题讨论】：

标签： javascript html css scroll overflow

【解决方案1】：

正文溢出工作正常，但您还将overflow-x: scroll 提供给正在创建滚动条的 HTML 标记。

你必须在你的 css 中删除 html 的样式

html{
   overflow-x: hidden;
}

然后在 body 上溢出就可以正常工作了。

http://prntscr.com/gzs7xs

【讨论】：