How Can I Disable Scrolling in Mobile Safari?

Disabling Scrolling in Mobile Safari: A Comprehensive Guide

Mobile Safari, while offering an intuitive browsing experience, can pose challenges when attempting to disable scrolling on long pages. This issue arises when the content extends beyond the user's visible screen, potentially leading to unwanted scrolling behavior.

To address this, one may instinctively apply CSS's 'overflow:hidden' property to the body element. However, this approach often fails in mobile Safari environments, leaving developers perplexed.

To overcome this limitation, the solution lies in extending the 'overflow:hidden' property beyond the body element to include the HTML element as well. By setting both 'html' and 'body' to have 'overflow:hidden,' you effectively prevent the browser window from scrolling, restricting content to the visible viewport.

html,
body {
    overflow: hidden;
} 

For iOS 9 specifically, an additional tweak may be necessary:

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

By applying these CSS changes, you can effectively disable scrolling on mobile Safari, ensuring that your content remains neatly contained within the user's visible screen.

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