无法在媒体查询中隐藏溢出-x

Posted 2023-03-06

【中文标题】无法在媒体查询中隐藏溢出-x

【英文标题】：Can't hide overflow-x in a media query

【发布时间】：2021-12-18 04:48:56

【问题描述】：

我有一个带有菜单的标题，当屏幕宽度小于 650 像素时，它变为汉堡菜单。之后该菜单被定位为绝对并向右平移。当我点击汉堡菜单时，它会滑入视图。之后一切正常，但我不能让溢出消失。 我尝试尝试向不同的父元素添加溢出，但无济于事。

这是页面 - https://badgerwannabe.github.io/rocket-sockets/index.html 这是一个带有文件的 Github 代表enter link description here

如果有任何帮助，将不胜感激。

UPD1：重现步骤 转到网站，打开开发工具并将视口调整为小于 650 像素的宽度，尝试向右滚动，您会看到问题。在此媒体查询中向正文添加溢出没有帮助

【参考方案1】：

如果您在打开菜单时将overflow: hidden 添加到正文元素，我认为这就是您要寻找的。如果没有，您能否进一步说明您要消除的溢出？

编辑：根据评论，如果您将overflow-x: hidden 添加到body 标记，那应该会为您完成。

【讨论】：

问题是菜单未打开时溢出。如果您访问网站，转到开发工具并将视口调整为小于 650 像素的宽度，尝试向右滚动，您会看到问题。在此媒体查询中向正文添加溢出没有帮助。

嗯，好的，我现在看到了问题。让我看看

我已经更新了答案。让我知道这是否适合你

也许我做错了什么 - 但是添加“overflow-x: hidden”在样式表顶部和 650px 媒体查询都不起作用，我试过了

啊，谢谢！我现在可以看到问题了。没有在多个浏览器上发生，但在 Chrome 设备视图和我的移动设备上发生。如果您还向 HTML 元素添加了 overflow-x hidden，例如：html overflow-x: hidden; 在 650px 断点处也应该修复它

【参考方案2】：

由于以下因素而发生此问题。

...
<img class="background-line"  src="assets/images/Path 18.png">
...
<img id="mailbox-sm" src="assets/images/Mask Group 4.png" >
...

有两种选择。

将overflow-x: hidden 添加到body 元素。 为上述元素设置正确的宽度。

【讨论】：

您好，感谢您的意见。 “background-line”和“mailbox-sm”确实会产生溢出，但没有我现在的那么大，肯定是菜单。此外，在 body 元素中添加“overflow-x: hidden”也无济于事。既不在 style.css 顶部，也不在 650px 媒体查询。

【参考方案3】：

当您将菜单平移到右侧（即看不见）时，您也可以设置它

display: none;

重新设置

display: flex

当您希望它滑入视野时。

【讨论】：

是的，它解决了问题，但是它失去了滑入视图的动画。你知道我怎样才能显示动画保持“显示：无”修复？对于其他人来说，奇怪的是它可以工作，即将元素推出视口并在身体上禁用溢出-x。