當彈出窗口打開時防止滾動身體

首先，我知道這個問題已經被多次詢問過，但我無法正常工作。在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

當彈出窗口打開時防止滾動身體

回答

相關問題