How Can I Prevent Scrolling on Mobile Safari?

Controlling Scrolling Behavior on Mobile Safari

Your website features extensive content, and you seek a method to restrict page scrolling, concealing information beyond the viewport's visible area. This functionality is crucial especially on iPhone and iPad devices.

Initial Troubleshooting Attempts

Implementing overflow: hidden; exclusively on the within your CSS does not appear to address the scrolling issue on mobile Safari. Additionally, creating a comprehensive wrapper around your website is not a viable solution.

Effective Solution

To effectively disable scrolling on mobile Safari, consider the following approach:

• Apply overflow: hidden; to both the and elements in your CSS. This technique has proven effective in resolving similar scrolling issues.

html,
body {
    overflow: hidden;
}

• For iOS 9 devices, an alternative solution may be necessary:

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

By implementing these CSS tweaks, you can prevent scrolling on mobile Safari and ensure that your page's content remains within the visible viewport.

The above is the detailed content of How Can I Prevent Scrolling on Mobile Safari?. For more information, please follow other related articles on the PHP Chinese website!