I am trying to create a site that looks like a native application on iPhone / Android devices. I managed to configure it so that the html and body do not scroll, and I have one content <div>that is the scrollable part.
However, when setting up
overflow-x:hidden
to only allow vertical scrolling, I still get horizontal scrolling on the iPhone (Chrome and Safari). You can see that the scrollbar belongs to the .content element. Customization
overflow:hidden
works as expected and disables scrolling.
For me, this seems like a bug in 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>
Yaron source
share