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>

 

 

Add a Comment...

 

Comments

goksuevleri theunitypoint minigamesacademy antiksalan reliancefl 11plus-coaching union22pa coldcase orscelikkapi ancalamagazine - 5/09/2017

That is a very good tip particularly to those new to the blogosphere. Simple but very precise info⦠Appreciate your sharing this one. A must read post! fotballdrakter - 4/26/2017

MitchMatt Leicester City DorisGarl TroyCoyne USA SerenaBla SherlynSk Manchester United HannahFar VirgilCar Mexico ElsaParde EverettRu Wales JosefDods - 3/08/2017