移动端网站视图无法滚动 overflow配置无效故障排查

别再挨个试overflow属性变体了，问题根本不在overflow的取值上，是你现有代码里几个直接锁死滚动、触发视口溢出的属性导致的，生产环境和本地表现不一致是因为本地dev服务器的样式热注入逻辑和打包后压缩合并的CSS优先级不一样，按下面步骤改就行：

核心问题定位 #

• 你给.menuNav设置的touch-action: none是滚动锁死的头号元凶：这个属性会直接禁用元素上所有原生触摸交互行为，移动端手指滑动滚动直接被拦截
• .menuNav里写的overflow-y: none是无效CSS：overflow-y根本没有none这个合法取值，只有visible/hidden/scroll/auto四个有效值，这个无效属性搭配后面的overflow: hidden，会导致菜单状态切换时滚动逻辑异常
• 固定定位元素存在视口溢出：.page-header作为fixed定位元素没设left: 0基准值，.mobile-logo写了margin-left: -40px的负边距，.menuNav写死max-width: 414px，这些都会导致元素宽度超出移动端视口，触发多余的滚动容器，也就是你看到的两个异常滚动条
• 全局样式没做初始化：没有清除body默认边距，也没做全局盒模型适配，打包后样式合并时容易出现宽度计算错误

具体修改方案 #

1. 替换媒体查询最开头的全局样式，把原来的html样式块改成下面的内容：

@media screen and (max-width: 414px) {
  * {
    box-sizing: border-box;
  }
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

2. 修改.menuNav基础样式，删掉锁滚动的无效属性，修正定位和宽度问题：

.menuNav {
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 0;
  overflow: hidden;
  max-width: 100vw;
  margin: 0;
  text-align: center;
  /* 删掉原来的overflow-y: none和touch-action: none */
}

3. 修正固定头部的定位偏移，给.page-header加定位基准，避免元素溢出：

.page-header {
  background: #322759;
  width: 100%;
  height: 20%;
  position: fixed;
  left: 0; /* 新增定位基准，避免宽度偏移 */
  top: 0;
  overflow: hidden; /* 裁掉内部元素的溢出部分 */
  /* 其他原有样式保留 */
}

4. 菜单开关的滚动锁逻辑不要纯靠CSS实现，在JS的菜单切换方法里加一行控制，兼容性更好：

// 菜单打开时执行
document.body.style.overflow = 'hidden';
// 菜单关闭时执行
document.body.style.overflow = 'auto';

本地测试方法 #

不用每次改完都推生产验证，本地执行build命令生成打包产物后，用静态文件服务启动dist目录就能复现生产环境的样式问题，调试效率高很多。
如果改完还有多余滚动条，给页面所有元素临时加outline: 1px solid red，一眼就能找到是哪个元素的宽度超出了视口。

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