0
まず、この同じ質問が何度か尋ねられましたが、正しく動作させることができません。私がインプリメントしているウェブサイトでは、ポップアップをいくつかの情報で開き、残りの部分がスクロールしないようにしています。ポップアップをスクロールすることはできますが、メニューはスクロールできません。また、ページ上を移動するため、本文上に「位置：固定」を使用しないでください。私の体がスクロールするのを防ぐために何が欠けていますか？ボディーには既に「オーバーフロー：隠されている」というプロアクティティーがあります。ここで私が開発したコードは次のとおりです。ポップアップが開いているときに本文がスクロールしないようにする
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;
}