Menu
It seems that if you have a div with horizontal scroll, inside a div that is positioned fixed, it prevents vertical scrolling on IOS. I.E - if I begin scrolling by placing my finger on the horizontal scrolling div, and try to scroll vertically, nothing happens.
Seems to be fine on my colleagues Andriod device.
I have created a test case, demonstrating the issue here:
http://jsbin.com/jikatugeli/
Here is the html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
some content underneath
<div class="pop-up">
<p>I'm some other content</p>
<div class="scrollable">
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
<div class="item">hi</div>
</div>
<div class="somemoretext">
hello there, I am some text to make things scrollable
</div>
</div>
</body>
</html>
Here is the css
p {
font-size:22px;
}
.item {
display:inline-block;
width:80px;
height:60px;
font-size:78px;
}
.scrollable {
width:350px;
white-space: nowrap;
overflow-x:scroll;
overflow-y:hidden;
}
.pop-up {
position:fixed;
height:300px;
background:red;
border: 1px solid #000;
width:100%;
top:0;
overflow-y:scroll;
z-index:9999;
}
.somemoretext {
padding-top:600px;
}
Thanks for any help.
244
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element's border.
Approach: To prevent body scrolling but allow overlay scrolling we have to switch the overflow to be hidden when the overlay is being shown. And while the whole page's overflow is hidden or the scroll is disabled the overflow in the y-axis of the overlay is enabled and the overflow can be scrolled.
Use position: fixed instead of position: absolute .
The below css fixes your issue
html,body{height:100%}
body{background:red}
p {
font-size:22px;
}
.item {
display:inline-block;
width:80px;
height:60px;
font-size:78px;
}
.scrollable {
width:350px;
white-space: nowrap;
overflow-x:scroll;
overflow-y:hidde;
position: relative;
-webkit-transform: translateZ(0);
}
.pop-up {
position:fixed;
height:300px;
background:blue;
border: 1px solid #000;
width:100%;
top:0;
overflow-y:scroll;
z-index:9999;
-webkit-overflow-scrolling: touch;
}
.somemoretext {
padding-top:600px;
}
The lines containing -webkit- are the key to make the scrolling work in Safari.
In the .pop-up DIV you need overflow-y: scroll and –webkit-overflow-scrolling: touch to force the scrolling. In .scrollableyou need –webkit-transform: tranzlateZ(0); to move the actual html content up and down, other wise the DIV will scroll but the overflowing content will NOT show.
120
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
