How to Eliminate Unwanted \"Overscrolling\" in Chrome for Mac?

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 element allows natural scrolling within the page's designated height, but restricts overscrolling.

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.

The above is the detailed content of How to Eliminate Unwanted \"Overscrolling\" in Chrome for Mac?. For more information, please follow other related articles on the PHP Chinese website!