Chrome移动端X轴溢出致右侧多余空白，已设CSS仍无效的排查求助

• 先清理无效的滚动条样式规则：你当前写的scrollbar-width: thick是Firefox内核专属的滚动条属性，在Chrome移动端不仅不生效，还会干扰Chrome自身对视口宽度的计算逻辑。直接删除这条规则，替换为兼容双内核的滚动条适配代码：

  /* 替换原html、body规则中的scrollbar-width设置 */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  /* 针对Chrome内核的滚动条全局适配 */
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  

• 排查检测工具漏判的隐形溢出：常规的溢出检测扩展大多只计算元素静态盒模型的宽度，会漏掉带transform: translateX()横向偏移、位移动画、绝对定位溢出的元素。这类元素的实际渲染位置超出视口时，哪怕被overflow规则裁剪，Chrome还是会按照偏移后的宽度计算横向滚动范围，留出对应大小的右侧空白。可以直接在Chrome DevTools控制台执行遍历脚本定位问题元素：

  document.querySelectorAll('*').forEach(el => {
    const elementRect = el.getBoundingClientRect();
    const viewportWidth = document.documentElement.clientWidth;
    if (elementRect.right > viewportWidth) {
      console.log('超出视口的元素：', el, '右侧空白宽度：', elementRect.right - viewportWidth);
    }
  })
  

  定位到问题元素后，给元素添加max-width: 100%、调整横向偏移值不超过视口范围即可。
• 修复100vw的计算逻辑偏差：Chrome移动端对100vw的宽度计算会默认包含垂直滚动条的占位宽度，和Firefox、DuckDuckGo浏览器的计算规则不同。只要页面内存在用width: 100vw设置的元素，哪怕给根节点加了overflow-x: hidden，Chrome还是会按照“元素宽度=可视视口宽+滚动条宽度”计算横向可滚动范围，形成固定宽度的右侧空白。修复时把所有元素的width: 100vw替换为width: 100%，同时配合box-sizing: border-box规则，确保内边距、边框不会把元素撑出视口。
• 校验视口meta标签配置：检查页面头部的视口设置，确保完整包含viewport-fit=cover参数，正确的配置为：

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

  缺少viewport-fit=cover时，Chrome移动端会默认给页面预留安全区的内边距，部分场景下会把右侧安全区的空白纳入横向可滚动范围，其他浏览器不会出现相同问题。
• 调整overflow规则的生效层级：Chrome移动端的横向裁剪规则，要求必须把overflow-x: hidden同时作用在html和body两个根节点上才能完全生效，单独设置在某一个根节点时，页面整体的宽度计算还是会包含溢出部分，无法彻底消除滚动条。

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