在移动设备中， 当用户触摸 (.menu-btn) 时，会显示 (.menu) 并且 (body) 被锁定滚动。
但问题是(.menu)也被查看了。
如何使(.menu)可以滚动，即使(body)看起来可以滚动？
https://jsfiddle.net/n17qw8sb/
我知道有body-scroll-lock。 : https://github.com/willmcpo/body-scroll-lock
不幸的是，我不允许为此使用 webpack :(
<body>
<header>
<h2> Top area </h2>
<div class="menu-btn">
</div>
<div class="menu">
<h2> Hamburger menu area </h2>
</div>
</header>
<section class="contents">
<h2> Contents area </h2>
</section>
</body>
$('.menu-btn').on('click', function() {
$('.menu').toggleClass('active');
$('body').toggleClass('lock-scroll');
$('html').toggleClass('lock-scroll');
})
body {
width: 100%;
background-color: lavender;
}
body.lock-scroll {
overflow: hidden;
}
html.lock-scroll {
overflow: hidden;
}
header {
width: 100%;
height: 3em;
position: fixed;
top: 0;
background-color: beige;
z-index: 100;
}
.menu-btn {
width: 1em;
height: 1em;
background-color: lightseagreen;
position: fixed;
z-index: 300;
top: 1em;
right: 1em;
}
.menu {
width: 100%;
height: 130vh;
position: fixed;
top: 0;
z-index: 200;
padding-top: 40%;
background-color: rgba(255,255,255, .5);
transform: translateX(100%);
transition: all .5s ease;
}
.menu.active {
transform: translateX(0%);
}
.contents {
width: 100%;
padding-top: 50%;
height: 150vh;
background-color: lightblue;
}
h2 {
text-align: center;
}
最佳答案
添加 .menu-content 元素并将 .menu 元素的内容放入其中。
并将此样式添加到样式末尾
.menu {
height: 100%;
overflow: scroll;
}
.menu-content {
height: 130vh;
}
https://jsfiddle.net/dm8zrabx/
$('.menu-btn').on('click', function() {
$('.menu').toggleClass('active');
$('body').toggleClass('lock-scroll');
$('html').toggleClass('lock-scroll');
})body {
width: 100%;
background-color: lavender;
}
body.lock-scroll {
overflow: hidden;
}
html.lock-scroll {
overflow: hidden;
}
header {
width: 100%;
height: 3em;
position: fixed;
top: 0;
background-color: beige;
z-index: 100;
}
.menu-btn {
width: 1em;
height: 1em;
background-color: lightseagreen;
position: fixed;
z-index: 300;
top: 1em;
right: 1em;
}
.menu {
width: 100%;
height: 130vh;
position: fixed;
top: 0;
z-index: 200;
padding-top: 40%;
background-color: rgba(255,255,255, .5);
transform: translateX(100%);
transition: all .5s ease;
}
.menu.active {
transform: translateX(0%);
}
.contents {
width: 100%;
padding-top: 50%;
height: 150vh;
background-color: lightblue;
}
h2 {
text-align: center;
}
/* newly added style */
.menu {
height: 100%;
overflow: scroll;
}
.menu-content {
height: 130vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<h2> Top area </h2>
<div class="menu-btn">
</div>
<div class="menu">
<div class="menu-content">
<h2> Hamburger menu area </h2>
</div>
</div>
</header>
<section class="contents">
<h2> Contents area </h2>
</section>
</body>注意:以全页 View 查看结果
关于javascript - 锁定body滚动，但body中的某些div可以滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58345549/