Overcoming "Overscrolling" in Web Pages

In Chrome for Mac, "overscrolling" is an undesirable effect that allows users to drag a page beyond its normal viewing area, as seen in the image provided. To address this issue and improve user experience, consider the following two methods:

Method 1: Restricting Overscrolling

If you want to entirely disable overscrolling, employ the following CSS code:

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

The overflow: hidden property on the element prevents any overflow content from becoming visible, effectively bounding the page within its viewport. The overflow: auto property on the

Method 2: Customizing Overscrolling Behavior

To customize and control overscrolling behavior, utilize the touch-action property:

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}

The code above prevents text selection while allowing general touch manipulation, including scrolling within the page's defined height. For more granular control, you can specify precise touch-action values, such as pan-x to allow only horizontal scrolling.