当弹出窗口打开时防止滚动身体

首先，我知道这个问题已经被多次询问过，但我无法正常工作。在Im实现的网站上，我打开一个带有一些信息的弹出窗口，然后阻止滚动的正文的其余部分。我想允许滚动弹出框但不是菜单。由于它将页面移动到顶部，因此也应避免使用“position：fixed”。我错过了什么来防止身体滚动？身体已经拥有“溢出：隐藏”的特性。这里是我开发的代码：当弹出窗口打开时防止滚动身体

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

来源

2017-10-20 Garces

身体溢出工作正常，但你也给overflow-x: scroll到正在创建滚动HTML标签。

您必须删除HTML的风格在你的CSS

html{ 
    overflow-x: hidden; 
}

然后在身体溢出将工作的罚款。

http://prntscr.com/gzs7xs

来源

2017-10-20 13:01:35

当弹出窗口打开时防止滚动身体

回答

相关问题