How Do I Disable Scrolling in Mobile Safari?

Disabling Scrolling on Mobile Safari

When confronted with long pages that overflow beyond the visible area, it becomes necessary to disable scrolling on mobile Safari to provide a seamless user experience. This article addresses this challenge by exploring solutions to prevent content from extending underneath the page's "fold" on iOS devices.

Body Overflow:hidden Ineffectiveness

Applying "overflow:hidden" to the body element typically restricts scrolling in most browsers. However, this approach fails to work on mobile Safari. This limitation poses a challenge in hiding content that exceeds the viewport on these devices.

Html and Body Overflow:hidden Solution

To resolve this issue, it is recommended to apply "overflow:hidden;" to both the HTML and body elements. This approach effectively disables scrolling on mobile Safari, ensuring that content is confined within the visible area of the browser.

iOS 9 Specific Fix

For iOS 9 users, a slight modification is necessary to achieve the desired outcome. In addition to "overflow:hidden;", add "position:relative;" and "height:100%;" to the CSS rules for both HTML and body. These adjustments ensure proper scrolling disablement on iOS 9 devices.

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