JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, 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-translucent" />
<title>Auto Shack</title>
<script type="text/javascript" src="http://cubiq.org/dropbox/iscroll/iscroll.js?v3.7.1"></script>
</head>
<body>
<div class="header">
<div class='left_link'></div>Demo
</div>
<div id="main_content" class="main_content">
<div>
<div id=scroller1>
<br/>
<div class='center_data'>Scrollable area</div>
<div class='center_data'>hello world!</div>
<br/>
</div>
</div>
</div>
</body>
</html>
CSS
body,ul,li{margin:0;padding:0;font-size:11px;}form input{border:1px solid #666;margin:3px 0;vertical-align:middle;}
body
{
background-color:#ffffff;
color:#666666;
font-family:Arial,Helvetica,sans-serif;
padding-top:0px;
overflow:hidden;
}
p{margin: .5em 0 0 0;}
div,ul,form,p{padding:0 2px;}
form,.p{margin-bottom:.5em;}
ul li{list-style:none;}a{color:#008B9F;text-decoration:none;}
small{font-size:x-small;}
table,td{vertical-align:top;}
img{border:0;}
.f{margin-top:.5em;padding-top:3px;}
.p{background-color:#8b009a;color:#ffcfff;padding:4px 0px 2px 2px;}
.z{color:#008B9F;margin-top:.5em;padding:0.5em 3px;border-top:1px solid #E883F2;}
.z img{vertical-align:middle;margin:3px 0pt;}
.f,.n,.r{border-top:1px solid #f5f7fa;}
.u,.d{background-color:#f5f7fa;}
.u,.v,.q,.m,.o,.n{padding:3px 2px;}
.j,.d,.c,.a{margin:.5em 2px;}
.r{padding-top:3px;}
.t,.c{color:#8b009a;}
.s{margin-top:.7em;}.g img{margin-right:3px;}.q img{vertical-align:top;margin-bottom:3px;}.k{background:#8b009A;color:#fff;border-top:1px solid #E88eF3;border-left:1px solid #E88eF3;border-bottom:1px solid #530065;border-right:1px solid #530065;font-size:1em;padding:2px 5px 3px;}.a{text-align:center;}.x{color:#CC0000; text-decoration:none;}.foot{background:#D80000;padding:0.45em 0.2em 0.2em;}.foot a{color:#ffffff;}.ct{text-align:center;padding:3px 2px;}.blk{display:block;}.adlink{text-align:center;font-weight:bold;}
.l{padding:0pt 0.16em;margin:0pt;text-align:left;line-height:1em;}
.bnr{background-color:#0DB8FF;color:#FFFFFF;margin:0pt;padding:0.385em;text-align:left;line-height:normal;}
.c{text-align:center;}
.c7{text-align:center;margin:0;padding:.385em 0;}
.b{font-weight:bold;font-size:1.18em; margin:0;color:#474747;}
a img{border-width:0;}
.sep{color:#868686;}
.header{
top:0;
width:100%;
height:45px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #76DE00), color-stop(0.05, #63D100), color-stop(1, #32971E));
color:#eee;
font-size:large;
...
JavaScript
var myScroll;
var Runa = 0;
function loaded() {
//setHeight(); // Set the wrapper height. Not strictly needed, see setHeight() function below.
// Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
myScroll = new iScroll('scroller1', {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false,
desktopCompatibility: true
});
//myScroll2 = new iScroll('scroller2', {desktopCompatibility:true});
}
// Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
// If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
document.addEventListener('touchmove', function(e) {}, true);
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);