Analysis, investigation and solution of horizontal scroll bars on web pages

1. The web page displays the horizontal scroll bar. as shown in Figure 1

2. Why is this horizontal scroll bar ‘must be dealt with’?

(1) From the perspective of user experience

Desktop end users almost never take the initiative to scroll horizontally

The horizontal scroll bar will bring:

The intuition of the page ‘not aligned’ is a sense of distrust

Scrolling by mistake, experience splitting

For the B2C e-commerce homepage, this is an obvious UX flaw

(2) from a professional perspective

1920×1080 is the de facto standard desktop resolution
There is also a horizontal scrolling at this resolution, indicating:

A section exists in width overflow (overflow)

or used:

width: 100vw

negative margin

Uncontrolled Horizontal Slider

(3) From the SEO / Core Web Vitals perspective

Horizontal scrolling itself does not directly affect SEO ranking

But it is often accompanied by:

CLS (Layout is unstable)

Unreasonable viewport calculation

Google is an indirect deduction on UX evaluation

The horizontal scroll bar that appears on the desktop is not an ‘acceptable difference’, but a structural problem that must be fixed.

2. Execute the following code in the console. ScrollWidth: The actual content width of the page. clientWidth: The width of the visual area.
return true = at least one element exceeds the visual width
It is not a browser scaling, not a system problem, but a DOM structure problem.

document.body.scrollWidth > document.body.clientWidth

3. Precisely locate ‘who’ is overflowing, and execute the following code in the console. You will get an array of elements, the outermost section / div, which is the source of horizontal scrolling.

[...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]

4. Positioning method

Filter all visible elements of the page in the browser console, filter scrollWidth greater than clientWidth nodes, gradually exclude components such as pop-ups, drawers, hidden elements, etc. that do not participate in the document flow, and converge the scope of the inspection scope to the main content area of the page.

5. Confirm the root cause. as shown in Figure 2

During the investigation process, it was found that a section on the homepage used a fixed width layout (design draft width 1920px), and visual centered through margin-left: -7.5px.
Since there is a vertical scroll bar on the desktop browser, the actual available viewport width is about 1905px, which produces horizontal precision overflow within the critical pixel range.
By adjusting the width of the section from 1920px to the same as the actual viewport, the horizontal scroll bar disappears, thus verifying that the problem is indeed caused by the layout hypothesis of the fixed width + negative margin .

6. Conclusions and suggestions. Remove the implementation of fixed width and negative margin, and the horizontal scroll bar disappears in line with expectations. as shown in Figure 3

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

style="z-index: inherit;"

This problem is a typical design draft size-driven layout that does not fully consider the precision overflow problem caused by the width of the scroll bar on the desktop side.
Remove the implementation of fixed width and negative margins, and control the maximum width through the internal container to avoid similar problems again with different browsers and resolutions.

7. The root of the problem has been confirmed, and the next step is to modify the corresponding theme file in the Shopify background, and it can be completely solved.