我的汉堡菜单中的链接在向下滚动时会与导航栏分离

由 发布于

我遇到的问题是导航栏和汉堡菜单在单击时显示一些链接。链接位置固定，主体设置为overflow-x：隐藏，overflow-y：滚动，但是当我尝试在移动设备中向下滚动页面时，它将无法正常工作；而如果我删除了overflow-x属性，整个内容也会向下滚动。我只需要找到一种方法，即可在菜单关闭时使页面滚动，并且不要这样做，也不要在打开菜单时将其与导航栏分离。我必须将overflow-x设置为隐藏，因为在移动设备中它会滚动到导航链接被隐藏的右侧。

这是我的CSS：

@media屏幕和（最大宽度：768px）{

body {
    overflow-x: hidden;
    overflow-y: scroll;
}



.nav-links {
    z-index: 100;
    position: fixed;
    right: 0;
    height: 90vh;
    top: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    background-color: #f4f8ff;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

.nav-links li {
    opacity: 0;
}

.burger {
    display: block;
}

}

这是小提琴，因此您可以查看发生了什么：

Fiddle