Pop-Up을 열었을 때 몸이 스크롤하지 못하도록하십시오.

처음으로이 동일한 질문을 몇 번이나 부탁했지만 제대로 작동하지는 않습니다. 웹 사이트에서 Im 구현에 대한 정보가있는 popUp을 열고 나머지 신체가 스크롤하는 것을 방지합니다. 팝업 메뉴는 스크롤 할 수 있지만 메뉴는 스크롤하지 못하게하고 싶습니다. 또한 페이지를 맨 위로 이동하기 때문에 본문에서 "position : fixed"를 사용하지 마십시오. 시체가 스크롤되지 않도록 나는 무엇을 놓치고 있습니까? 몸에는 이미 "overflow : hidden"이있다. 여기서 I는 개발 코드 :Pop-Up을 열었을 때 몸이 스크롤하지 못하도록하십시오.

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

바디 오버 플로우가 잘 작동하지만 당신은 또한 스크롤 막대를 만드는 HTML 태그에 overflow-x: scroll을 부여.

당신은 그런 몸에 오버 플로우가 잘 작동됩니다

html{ 
    overflow-x: hidden; 
}

당신의 CSS에서 HTML의 스타일을 제거해야합니다.

http://prntscr.com/gzs7xs

출처

2017-10-20 13:01:35

Pop-Up을 열었을 때 몸이 스크롤하지 못하도록하십시오.

답변

관련 문제