It appears that a div with horizontal scroll inside a div positioned fixed is causing an issue with vertical scrolling on iOS. When attempting to scroll vertically by placing my finger on the horizontal-scrolling div, nothing happens.
The problem does not seem to occur on my colleague's Android device.
I have set up a test case to demonstrate the issue here:
Below is the HTML code for reference:
<!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>
And here is the CSS code used in this scenario:
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;
}
Any assistance or advice on resolving this issue would be greatly appreciated. Thank you.