Menu
I'm trying to create a site that feels like a native app on iPhone/Android devices.
I've managed to set it up so html and body do not scroll and I have a single content <div> which is the scrollable part.
However, when setting
overflow-x:hidden
to allow only vertical scrolling I still get a horizontal scrolling behavior on iPhone (Chrome and Safari). You can see the scrollbar belongs to the .content element. Setting
overflow:hidden
works as expected and disables all scrolling.
To me it looks like a bug on Chrome.
The code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.scroll {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.content {
height: 2000px;
margin: 10px;
overflow-x: hidden;
background: linear-gradient(to bottom, #f00 0%, #00f 50%);
}
</style>
</head>
<body>
<div class="scroll">
<div class="scroll">
<div class="content">
<div style="height: 20px; width: 1000px; background: black;"></div>
</div>
</div>
</div>
</body>
</html>
553
Is there a reason that you are using a separate element to scroll and not letting the html element do it?
I have found that phones can be quite temperamental when not using the html element as the scroll, in fact some older android platforms will refuse to scroll at all if it isn't on the html element (Though I realise you specified just iOS in your question).
in regard to your actual question I would think it is because of the conflicting overflows on the same element.
overflow-y: auto;
overflow-x: hidden;
You would probably want to have one element that does the overflow-x and then put that inside of another element that handles the scrolling.
aka: give your .content element a max-width: 100%; and pull out the duplicate .scroll element
134
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
