Menu
I know this question has been asked a dozen of times, but none of the solutions on those questions worked for me.
I want the body element on iOS 13 safari to not scroll. This means no scrolling, and no elastic bounce (overflow-scrolling) effect.
I have two elements next to each other on which I have set overflow: scroll;, those should scroll, just the body around them shouldn't.
All the solutions I've tried just don't work in progressive webapps that have the following tag inside their head and are saved to the homescreen.
<meta name="apple-mobile-web-app-capable" content="yes">
try 1: setting overflow hidden on body and/or html. Didn't work for iOS 13 safari.
https://stackoverflow.com/a/18037511/10551293
html {
position: relative;
overflow: hidden;
height: 100%;
}
body {
position: relative;
overflow: hidden;
height: 100%;
}
does nothing in iOS 13 safari but works in macOS safari and Firefox.
try 2: setting position fixed on the body. Doesn't work for me because when the user scrolls, the body doesn't but the scrolling still prevents my two inner elements from scrolling while the overflow-bounce is animating.
https://stackoverflow.com/a/47874599/10551293
body {
position: fixed;
}
only puts the body over the scrolling of the page. The scrolling (overflow-scrolling) happens through the fixed body...
try 3: preventing the default on touch moved. Didn't work (is an older solution...).
https://stackoverflow.com/a/49853392/10551293
document.addEventListener("touchmove", function (e) {
e.preventDefault();
}, { passive: false });
does nothing as I can tell. Not in safari nor in Firefox.
try 4: preventing the default on scrolling of the window and setting the scroll position back to 0. Is not viable because of buggy animations.
window.addEventListener("scroll", (e) => {
e.preventDefault();
window.scrollTo(0, 0);
});
sets the scroll position back to 0 but the overflow-scrolling still applies which ends up in a buggy behaviour.
To test it yourself, save the snippet below as an html file, and save it to the homescreen on an iPad (or iPad simulator). The body suddenly becomes scrollable when saved to the homescreen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<style>
body, html {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
nav, footer {
width: 100%;
height: 5rem;
background: blue;
flex-shrink: 0;
}
main {
display: flex;
height: 0;
flex-grow: 1;
padding: 2rem;
}
section {
width: 50%;
overflow: scroll;
display: flex;
flex-direction: column;
align-items: center;
}
div {
flex-shrink: 0;
width: 25%;
height: 18rem;
margin: 1rem;
background: red;
}
</style>
<nav></nav>
<main>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</main>
<footer></footer>
</body>
</html>
230
When the mobile menu is active (overlay) want to prevent that the body is scroll able, disable scroll for body.
Go to Settings and tap Accessibility. Turn on the feature, then use the slider to select a sensitivity level.
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.
I combined try 2 and try 4 from the question. The fixed body shows no overflow scrolling and the scroll reset prevents the long animation of the overflow scrolling in the background. It's really ugly but it kinda works.
body {
position: fixed;
}
window.addEventListener("scroll", (e) => {
e.preventDefault();
window.scrollTo(0, 0);
});
function unlockScroll () {
const scrollY = this.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
document.body.style.left = '';
document.body.style.right = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);
};
function lockScroll () {
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;
document.body.style.left = '0';
document.body.style.right = '0';
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
