Empêcher le défilement du corps lorsqu'un Pop-Up est ouvert

Question

Je sais d'abord que cette même question a été posée plusieurs fois mais je n'arrive pas à la faire fonctionner correctement. Sur le site Im Im implémentation, j'ouvre un pop-up avec quelques infos, puis empêche le reste du corps de défiler. Je veux permettre de faire défiler la popup mais pas le menu. Évitez également d'utiliser "position: fixed" sur le corps car il déplace la page vers le haut. Qu'est-ce qui me manque pour empêcher le corps de défiler? Le corps a déjà la propriété "débordement: caché". Voici le code que je développé:

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

HTML:

Le recouvrement pour couvrir le corps:

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

Le menu contextuel réel:

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

Answer 1

débordement du corps fonctionne bien, mais vous avez aussi donné overflow-x: scroll à Tag HTML qui crée la barre de défilement.

Vous devez supprimer le style de HTML dans votre css

html{ 
    overflow-x: hidden; 
} 

ensuite déborder sur le corps va fonctionner très bien.

http://prntscr.com/gzs7xs