我制作了一个导航栏,当用户单击汉堡菜单时,该导航栏从屏幕的右侧显示。测试页面后,我可以滚动到隐藏的导航栏,有什么方法可以防止这种情况发生?溢出?
nav {
display:flex;
justify-content: space-around;
align-items: center;
min-height: 2vh;
font-family: var(--ff-primary);
background-color: var(--clr-accent);}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
z-index: 9999;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: var(--clr-dark);
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 16px;
}
.logo{
color: var(--clr-dark);
letter-spacing: 2px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 30px;
height: 3px;
background-color: var(--clr-dark);
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1024px){
.nav-links{
width: 55%;
}
}
@media screen and (max-width:768px){
.nav-links{
position: absolute;
right: 0px;
height: 100%;
top: 5vh;
background-color: var(--clr-accent);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.3s ease-in;
}
.nav-links a{
}
.nav-links li{
opacity: 1;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
这是我的导航栏的CSS代码,它是移动设备上的汉堡包,在常规屏幕尺寸上,它只是一个导航栏
我通常使用overflow: hidden;
来防止滚动。如果仍然需要垂直滚动,则可以使用overflow-x: hidden;
仅禁用水平滚动。 Here是用于更好说明的链接。
没有看到您的代码,我想您做了这样的事情: