我正在寻找一种方法,以防止打开叠加层“弹出部分”时主体滚动,并且仅允许在“弹出部分” div上滚动。我正在寻找使用javascript的解决方案,但是我对JS不太有经验
有没有人有什么建议?
$('#toggle-menu').click(function() {
$(this).toggleClass('active');
$('.popup-section').toggleClass('open');
$('html').toggleClass('open');
});
$('.popup-section').click(function() {
$(this).toggleClass('active');
$('.popup-section').removeClass('open');
$('.button_container').removeClass('active');
$('html').removeClass('open');
});Run Code Online (Sandbox Code Playgroud)
.popup-section{
display: none;
opacity: 0;
height: 100vh;
left: 0;
right: 0;
width: 100vw;
overflow: scroll;
}
.popup-section.open {
display: block;
opacity: 1;
z-index: 99;
}
.popup-background {
height: 100vh;
width: 100vw;
background-color: #ccbcaf;
z-index: 90;
cursor: pointer;
position: fixed;
overflow: scroll;
top: 0;
}Run Code Online (Sandbox Code Playgroud)
<div class="button_container open" id="toggle-menu">
<span class="top"></span>
<span class="bottom"></span>
</div>
<div class="popup-section">
<div class="popup-background" title="">
<!--CONTENT-->
</div>
</div>Run Code Online (Sandbox Code Playgroud)
javascript ×1