Scolling on Mobile Devices

This works pretty good, unfortunately no scrollbars at all on android (testing on webkit and chrome). In iOS the scroll bars only appear after you've started scrolling.

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Scrolling Tests</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
body {padding:30px; }
.container{
height:200px;
width:200px;
border:1px solid black;
overflow: scroll;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
ul,li {margin:0; padding:0;}
li{padding:20px; }
</style>
</head>
<body>
<div class="container">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>

</body>
</html>