How to Completely Prevent Horizontal Scrolling on a Webpage?

Prohibiting Webpage Horizontal Scrolling

In this query, a frustrated developer encounters an undesired horizontal scrollbar on their webpage. While existing solutions merely hide the scrollbar, they seek a comprehensive method to physically disable the horizontal scroll feature.

To rectify this issue, the recommended solution is to implement the following CSS code:

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

This code effectively prevents the user from scrolling the webpage horizontally, restricting scrolling to only the vertical direction. By defining a maximum width of 100% for the HTML and body elements, the container's size is constrained to the width of the page, eliminating the possibility of scrolling beyond that boundary. Additionally, setting the overflow-x property to hidden ensures that any excess content beyond the width limit is simply concealed, rather than triggering horizontal scrolling.

The above is the detailed content of How to Completely Prevent Horizontal Scrolling on a Webpage?. For more information, please follow other related articles on the PHP Chinese website!