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

【问题标题】：How do I prevent my websites hamburger menu from letting people scroll horizontally如何防止我的网站汉堡菜单让人们水平滚动
【发布时间】：2021-03-16 17:20:36
【问题描述】：

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

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

网站：mostwantedrbx.github.io

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

【问题讨论】：

问题中没有代码可以说明问题； minimal reproducible example。如果我在一个空白的 HTML 页面上使用那个 CSS，它不会做太多。
我不想争论，但最少的可重现代码意味着我必须拥有具有重现它的功能的汉堡菜单，因为它使侧边栏离开页面的一侧。当您打开和关闭它时，它可以让您横向滚动。我觉得复制它的代码太多了。这就是为什么我将 repo 放在小型网站上的原因，我的问题可能来自 JavaScript、html 或 css。但我的问题还是得到了解决。感谢大家的建议和帮助，我会确保下次这样做。

标签： javascript html css horizontal-scrolling

【解决方案1】：

给 .nav 链接一个固定位置而不是绝对位置。

@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;
}

}

【讨论】：

【解决方案2】：

这个might help

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

【讨论】：