How to Effectively Disable Scrolling in Mobile Safari?

Disabling Scrolling on Mobile Safari: Overcoming Platform-Specific Quirks

When working with long web pages on mobile Safari, it can be desirable to prevent users from scrolling past the initial visible content. However, applying overflow:hidden to the element doesn't always achieve this effect on this particular platform.

To resolve this issue, a solution that has proven effective is to apply overflow:hidden to both the html and body elements. This approach effectively controls scrolling behavior on mobile Safari:

html, body {
    overflow: hidden;
}

However, if you're working with iOS 9 specifically, you may encounter a slight variation in the necessary code:

html, body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

These adjustments ensure that scrolling is disabled beyond the visible portion of the page on mobile Safari, enabling you to achieve the desired layout and user experience.

The above is the detailed content of How to Effectively Disable Scrolling in Mobile Safari?. For more information, please follow other related articles on the PHP Chinese website!