无法在媒体查询中隐藏 overflow-x
Can't hide overflow-x in a media query
我有一个带菜单的header，当屏幕宽度小于650px时，它变成了汉堡菜单。之后，菜单被定位为绝对位置并向右移动。当我点击汉堡菜单时，它会滑入视图。之后一切正常，但我无法让溢出消失。
我尝试将溢出添加到不同的 parent 元素，但无济于事。
这是页面 - https://badgerwannabe.github.io/rocket-sockets/index.html
这是一个 Github 代表，文件 enter link description here
如有任何帮助，将不胜感激。
UPD1：重现步骤
转到该网站，打开 Dev Tools 并将视口的大小调整为小于 650 像素的宽度，尝试向右滚动，您会看到问题所在。在此媒体查询中向 body 添加溢出没有帮助
如果您在打开菜单时将 overflow: hidden 添加到 body 元素，我认为这就是您要查找的内容。如果没有，您能否进一步说明您要消除的溢出？
编辑：根据评论，如果您将 overflow-x: hidden 添加到 body 标签，那应该会为您完成。
出现此问题的原因如下。
...
<img class="background-line" alt="background-line" src="assets/images/Path 18.png">
...
<img id="mailbox-sm" src="assets/images/Mask Group 4.png" alt="small mailbox">
...
有两种选择。
- 将
overflow-x: hidden 添加到 body 元素。
- 为以上元素设置正确的宽度。
当您将菜单向右平移（即超出视野）时，您也可以设置它
display: none;
将其设置回
display: flex
当您希望它滑入视图时。
我有一个带菜单的header，当屏幕宽度小于650px时，它变成了汉堡菜单。之后，菜单被定位为绝对位置并向右移动。当我点击汉堡菜单时，它会滑入视图。之后一切正常，但我无法让溢出消失。 我尝试将溢出添加到不同的 parent 元素，但无济于事。
这是页面 - https://badgerwannabe.github.io/rocket-sockets/index.html 这是一个 Github 代表，文件 enter link description here
如有任何帮助，将不胜感激。
UPD1：重现步骤 转到该网站，打开 Dev Tools 并将视口的大小调整为小于 650 像素的宽度，尝试向右滚动，您会看到问题所在。在此媒体查询中向 body 添加溢出没有帮助
如果您在打开菜单时将 overflow: hidden 添加到 body 元素，我认为这就是您要查找的内容。如果没有，您能否进一步说明您要消除的溢出？
编辑：根据评论，如果您将 overflow-x: hidden 添加到 body 标签，那应该会为您完成。
出现此问题的原因如下。
...
<img class="background-line" alt="background-line" src="assets/images/Path 18.png">
...
<img id="mailbox-sm" src="assets/images/Mask Group 4.png" alt="small mailbox">
...
有两种选择。
- 将
overflow-x: hidden添加到body元素。 - 为以上元素设置正确的宽度。
当您将菜单向右平移（即超出视野）时，您也可以设置它
display: none;
将其设置回
display: flex
当您希望它滑入视图时。