Mobile (android & ios) browsers ignore overflow hidden on body, html and container
My site has multiple overlays (lightboxes) and I need to prevent the page from scrolling below them when they are open. So I use a little jQuery to add overflow: hidden;
in body
, html
, #page
. This works great in desktop browsers, but mobile browsers don't seem to follow the rules.
My page structure:
<html>
...
<body>
<div id="page">
...
</div>
</body>
</html>
My jQuery just puts the class on three elements when the trigger is clicked. jQuery works (applying style) and I don't get any errors.
is there a known bug and / or a known fix?
source to share
Used roughly the same idea, but set the class noscroll
instead of applying styles directly to the element.
.noscroll { overflow: hidden; }
which worked, if I remember correctly, prior to iOS 7.
Experimenting a bit and it seems like it does the trick.
.noscroll { overflow: hidden; position: fixed; }
source to share
Here is my own implementation.
I had problems with overflow
that doesn't work as expected while the offcanvas menu is open. The way I overcame the problem was that in order to apply the tags overflow: hidden
and position: fixed
tags html
, body
and #page
that makes noskroll anything other than the menu itself.
Hope this helps someone!
HTML:
<header id="masthead">
<button type="button" class="toggle">Toggle</button>
</header>
<nav id="offcanvas-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque erat vel massa porttitor, ac sagittis velit vehicula. Nunc iaculis sapien justo, ac viverra mi convallis et. Sed ac massa lacinia, varius neque et, varius mi. Integer in ligula vitae arcu mollis mollis ut a tortor. Fusce quis tellus fringilla, venenatis arcu posuere, suscipit libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus hendrerit sodales leo, ac pellentesque odio fermentum nec. Ut feugiat in tortor quis cursus. Praesent porttitor imperdiet orci. Morbi sed ultricies velit. Nulla maximus rhoncus congue.</p>
<p>Proin nec pharetra tortor, eu sollicitudin ipsum. Morbi turpis magna, feugiat ornare pretium a, tristique ac urna. Phasellus rutrum sem a turpis tincidunt viverra in eget odio. Mauris a nibh eget lacus volutpat lobortis. Sed convallis posuere nisl, id blandit est posuere a. Duis tempor euismod nunc, ut suscipit ligula feugiat in. Phasellus congue nibh non vulputate consectetur.</p>
</div>
LESS:
html.offcanvas-active,
html.offcanvas-active body
html.offcanvas-active #page {
overflow: hidden;
position: fixed;
}
html.offcanvas-active {
#masthead,
#page {
-webkit-transform: translate(-250px);
-moz-transform: translate(-250px);
transform: translate(-250px);
}
#offcanvas-menu {
right: 0;
}
}
body {
font-family: Arial, sans-serif;
}
#masthead {
.toggle {
float: right;
}
&:after {
visibility: hidden;
display: block;
content: "";
clear: both;
}
}
#masthead,
#page {
position: relative;
-webkit-transition: transform 1s ease-in-out;
-moz-transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#offcanvas-menu {
position: fixed;
top: 0; right: -250px;
width: 250px; height: 100%;
background-color: orange;
-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
transition: right 1s ease-in-out;
ul {
margin: 0; padding-left: 0;
list-style: none;
li {
a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #fff;
}
}
}
}
JS / JQuery:
$(document).ready(function() {
$('#masthead').on('click', '.toggle', function() {
$('html').toggleClass('offcanvas-active');
});
});
source to share