Keywords: CSS | JavaScript | Mobile Safari | Overflow | Touch-action
Abstract: This article explores the challenge of disabling scrolling on mobile Safari and presents a primary solution using the CSS property touch-action, with supplementary methods discussed for completeness.
In web development, disabling scrolling on mobile devices, particularly Safari on iOS, is a common challenge when designing fixed or modal interfaces.
Problem Analysis
The standard CSS property overflow:hidden is often ineffective on mobile Safari due to its unique handling of touch events and viewport.
Primary Solution: Using touch-action
A robust solution involves the CSS property touch-action. Setting touch-action: none; prevents default touch behaviors such as scrolling.
body {
touch-action: none;
-ms-touch-action: none; /* For Internet Explorer compatibility */
}This approach is supported in modern browsers and is documented on MDN.
Alternative Methods
Other methods include applying overflow:hidden to both html and body elements, or using fixed positioning. For example:
html, body {
overflow: hidden;
position: relative;
height: 100%;
}However, these may have limitations or glitches in certain scenarios.
Best Practices and Conclusion
For disabling scrolling on mobile Safari, touch-action: none; is recommended due to its specificity and standard compliance. Always test across devices for compatibility.