安卓Chrome 116.x版本React.js页面滚动异常问题求助

• 检查viewport元标签配置
  新版本Chrome对移动端viewport的解析可能有调整，确保viewport标签包含viewport-fit=cover（适配全面屏），并且正确设置宽度：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  

  若之前未设置viewport-fit=cover，Chrome 116可能因系统状态栏/导航栏的布局变化，导致页面高度计算偏差引发滚动。

• 排查元素横向溢出根源
  overflow-x: hidden不生效通常是因为子元素存在超出视口的尺寸，而非html/body本身的问题：

  1. 打开Chrome DevTools（安卓端可远程调试），勾选「Show rulers」查看页面宽度，定位哪个元素超出视口
  2. 检查是否有元素设置了width: 100vw同时加了padding-left/right或margin，此时实际宽度会超出视口，需改为width: 100%并配合box-sizing: border-box：

     .problem-element {
       width: 100%;
       box-sizing: border-box;
       padding: 0 16px;
     }
     

  3. 排查绝对定位/固定定位元素，确保其left/right取值不会导致超出视口。

• 调整html/body的溢出与高度设置
  尝试同时锁定html和body的溢出，并明确高度，避免因浏览器默认样式差异导致滚动：

  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    scroll-behavior: smooth; /* 若问题仍存在，可暂时注释此属性排查是否为平滑滚动兼容性问题 */
  }
  

  部分Chrome新版本中，scroll-behavior: smooth与overflow: hidden的组合可能触发异常滚动，可先移除该属性验证。

• 限制触摸滚动行为
  通过touch-action属性明确允许的滚动方向，防止不必要的横向滚动触发：

  body {
    touch-action: pan-y; /* 仅允许纵向滚动，若无需滚动可设为none */
  }
  

• 排查动态内容与JS逻辑
  检查页面中是否有动态加载内容、窗口resize监听、或DOM操作代码，这些在Chrome 116中可能因浏览器重排机制变化，导致元素尺寸异常。例如：

  • 确保动态生成的元素宽度不会超出父容器
  • 避免在resize事件中错误设置元素宽度

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