我有一个导航菜单已经可以使用,但是当它显示在其他内容之上时,页面仍然可以滚动。按钮的位置与页面相同,如果隐藏滚动条,页面会跳动太多。当活动类处于激活状态时,我想要禁用主体上的滚动条。我尝试在body上使用CSS
我希望JS可以修改以在导航打开时保持滚动条存在但不可滚动,但我不确定如何以可行的方式解决此问题。
position: fixed; overflow-y:scroll
,但这会添加双重滚动,并且不总是恢复原状。我希望JS可以修改以在导航打开时保持滚动条存在但不可滚动,但我不确定如何以可行的方式解决此问题。
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
z-index: 2;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align:center;
}
.nav-action {
height: 50px;
width: 50px;
}
.pagefill {
display: block;
with: 50%;
height: 2000px;
background-color: #000000;
margin: auto;
margin-top: 100px;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<button class="nav-action">
<p>☰</p>
</button>
</div>
</div>
<div class="site-nav">
<div class="site-nav-action-container">
<button class="nav-action">
<p>×</p>
</button>
</div>
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
<div class="pagefill"></div>
编辑
加入这个似乎可以解决问题,但是问题在于当导航关闭时需要去除活动类(active class)。同时,位置和overflow-y元素也需要在主体类中,但是这已经接近了解决方案。
body.active, html{
width: 100vw;
position: fixed !important;
overflow-y: scroll !important;
}
overflow-y: none
应用于body
是唯一的方法。谢谢! - Hanz