如何防止我的网站汉堡菜单让人们水平滚动

Question

我想知道如何防止移动设备上的用户在打开和关闭我的汉堡菜单后向侧面滑动。在他们打开它之前它工作正常，但在它坏了之后和下次它关闭时它们可以横向滚动。我已经尝试了其他问题上建议的事情无济于事。这不是一个很大的网站，所以没有太多内容。

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

网站：mostwantedrbx.github.io

回购：https://github.com/MostwantedRBX/MostwantedRBX.github.io

Answer 1

这个might help

body {
    overflow-x: hidden !important;
}
.container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

Answer 2

给 .nav-links 一个固定位置而不是绝对位置。

@media screen and (max-width: 788px) {
.nav-links {
    position: fixed; /* instead of absolute */ 
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

}

如何防止我的网站汉堡菜单让人们水平滚动

How do I prevent my websites hamburger menu from letting people scroll horizontally

html

javascript

css

horizontal-scrolling