网页显示横向滚动条的分析排查与解决

1、网页显示横向滚动条。如图1

2、为什么这个横向滚动条“必须处理”？

(1) 从用户体验角度

桌面端用户 几乎不会主动横向滚动

横向滚动条会带来：

页面“没对齐”的直觉不信任感

误触滚动，体验割裂

对 B2C 电商首页来说，这是明显的 UX 瑕疵

(2) 从专业度角度

1920×1080 是事实上的标准桌面分辨率
在这个分辨率下还出现横向滚动，说明：

某个 section 存在 宽度溢出（overflow）

或使用了：

width: 100vw

负 margin

未受控的横向 slider

(3) 从 SEO / Core Web Vitals （核心网络指标） 角度

横向滚动本身 不直接影响 SEO 排名

但它往往伴随：

CLS（布局不稳定）

不合理的 viewport 计算

Google 在 UX 评估上是间接扣分项

桌面端出现横向滚动条不是“可接受差异”，而是必须修复的结构问题。

2、在 Console 执行如下代码。scrollWidth：页面实际内容宽度。clientWidth：可视区域宽度。
返回 true = 至少有一个元素超出了可视宽度
不是浏览器缩放、不是系统问题，是 DOM 结构问题。

document.body.scrollWidth > document.body.clientWidth

document.body.scrollWidth > document.body.clientWidth

3、精准定位“谁”在溢出，在 Console 执行如下代码。会得到一个元素数组 其中 最外层的 section / div，就是导致横向滚动的根源。

[...document.querySelectorAll('*')].filter(el => el.scrollWidth > el.clientWidth)

[...document.querySelectorAll('*')].filter(el => el.scrollWidth > el.clientWidth)

[object HTMLHtmlElement],[object HTMLBodyElement],[object HTMLElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLElement],[object HTMLFormElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLHeadingElement],[object HTMLSpanElement],[object HTMLSpanElement],[object HTMLElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],https://csttiresus.com/collections/all/products/cst-20-x-3-50-4-00-sv,[object HTMLDivElement],[object HTMLDivElement],[object HTMLSpanElement]

[object HTMLHtmlElement],[object HTMLBodyElement],[object HTMLElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLElement],[object HTMLFormElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLHeadingElement],[object HTMLSpanElement],[object HTMLSpanElement],[object HTMLElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],https://csttiresus.com/collections/all/products/cst-20-x-3-50-4-00-sv,[object HTMLDivElement],[object HTMLDivElement],[object HTMLSpanElement]

4、定位方法

通过在浏览器控制台中对页面所有可见元素进行遍历，筛选 scrollWidth 大于 clientWidth 的节点，逐步排除弹窗、抽屉、隐藏元素等不参与文档流的组件，将排查范围收敛到页面主体内容区域。

5、根因确认。如图2

在排查过程中发现首页某个 section 使用了固定宽度布局（设计稿宽度 1920px），并通过 margin-left: -7.5px 进行视觉居中。
由于桌面端浏览器存在垂直滚动条，实际可用视口宽度约为 1905px，该布局方式在临界像素范围内产生横向精度溢出。
通过将该 section 的宽度从 1920px 调整为与实际视口一致后，横向滚动条随即消失，从而验证该问题确实由固定宽度 + 负 margin 的布局假设引起。

6、结论与建议。移除固定宽度与负 margin 的实现方式，横向滚动条消失，符合预期。如图3

style="z-index: inherit; width: 1920px; margin-left: -7.5px;"

style="z-index: inherit; width: 1920px; margin-left: -7.5px;"

style="z-index: inherit;"

style="z-index: inherit;"

该问题属于典型的设计稿尺寸驱动布局在桌面端未充分考虑滚动条宽度所导致的精度溢出问题。
移除固定宽度与负 margin 的实现方式，并通过内部容器控制最大宽度，以避免在不同浏览器与分辨率下再次出现类似问题。

7、已经确认了问题根源，下一步有待于在 Shopify 后台修改相应的主题文件，就可以彻底解决。