媒体查询场景下无法实现overflow-x隐藏问题求助

问题根因 #

你开发的移动端汉堡菜单默认通过translateX向右侧平移出视口，由于绝对定位元素不会被父容器默认的尺寸限制收缩，会导致页面整体宽度被撑大，单独给body加overflow-x: hidden不生效是因为页面根滚动容器是html元素，需要同步设置根元素的溢出规则。

解决方案 #

方案1：全局禁用横向滚动（通用快捷） #

直接在全局样式中添加如下规则，不需要限制在650px的媒体查询内，全尺寸下生效不会影响正常布局：

html, body {
  overflow-x: hidden;
}

方案2：精准限制头部容器溢出（不影响全局布局） #

因为你的导航菜单是相对于头部容器做绝对定位的，直接给头部容器添加横向溢出隐藏规则即可：

header {
  /* 原有position: relative属性保留 */
  overflow-x: hidden;
}

验证方法 #

修改后将视口宽度调整到650px以下，尝试横向滚动确认无溢出即可，也可以在开发者工具元素面板中检查导航菜单关闭状态的平移距离，确认不会超出头部容器宽度。

内容的提问来源于stack exchange，提问作者BadgerWannaBe