移动端wrapper下overflow-y不生效 横向滚动可访问导航栏问题如何解决

你遇到的横向滚动溢出问题和overflow-y属性没有直接关联：overflow-y仅控制纵向内容的溢出行为，横向溢出需要单独配置overflow-x属性。可按照以下步骤逐一排查修复：

• 修正外层wrapper容器的溢出配置，同时限制横向溢出、放开纵向滚动，避免内容撑宽容器：

.wrapper {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  /* 避免内边距、边框撑宽容器 */
  padding: 0;
  margin: 0;
}

• 给根节点添加全局横向溢出限制，避免滚动穿透到html/body层级导致限制失效：

html, body {
  width: 100%;
  overflow-x: hidden;
  /* 禁用移动端浏览器默认的横向滚动回弹效果 */
  overscroll-behavior-x: none;
}

• 调整隐藏导航栏的定位逻辑，避免导航栏占位撑开父容器宽度：
  如果你将默认隐藏的侧边导航放在了wrapper内部，需要给导航栏添加固定定位脱离正常文档流，此时导航栏本身的宽度不会参与父容器的宽度计算，自然不会导致父容器出现横向滚动条：

/* 隐藏状态的侧边导航 */
.side-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 240px;
  height: 100vh;
  /* 默认隐藏在视口右侧外 */
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 999;
}
/* 点击唤起时添加的激活类 */
.side-nav.active {
  transform: translateX(0);
}

• 兜底排查：如果以上配置后仍有横向滚动，可在Chrome开发者工具的移动端模拟模式下，从body开始逐层选中子元素，查看元素盒模型的宽度是否超过100vw，找到溢出的元素后单独添加max-width: 100%限制即可。

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