Menu
Usually, we can use overflow: hidden on the <body> element to prevent scrolling. But unfortunately, that does not work on older versions of iOS. In this article, we check out which possibilities we have to prevent scrolling in all browsers, including mobile devices like iPhones and Android-powered smartphones.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.
I had a similar issue and found that applying overflow: hidden; to both html and body solved my problem.
html,
body {
overflow: hidden;
}
For iOS 9, you may need to use this instead: (Thanks chaenu!)
html,
body {
overflow: hidden;
position: relative;
height: 100%;
}
body {
position:relative; // that's it
overflow:hidden;
}
Some solutions listed here had some strange glitches when stretching the elastic scrolling. To fix that I used:
body.lock-position {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
Source: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/
After many days trying, I found this solution that worked for me:
touch-action: none;
-ms-touch-action: none;
Had this issue today on iOS 8 & 9 and it seems that we now need to add height: 100%;
So add
html,
body {
position: relative;
height: 100%;
overflow: hidden;
}
Combining the answers and comments here and this similar question here worked for me.
So posting as a whole answer.
Here's how you need to put a wrapper div around your site content, just inside the <body> tag.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- other meta and head stuff here -->
<head>
<body>
<div class="wrapper">
<!-- Your site content here -->
</div>
</body>
</html>
Create the wrapper class as below.
.wrapper{
position:relative; //that's it
overflow:hidden;
}
I also got the idea from this answer here.
And this answer here also has got some food for thought. Something that probably will work equally good in both desktops and devices.
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