<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AppScroll</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set Apple icons for when prototype is saved to home screen -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="touch-icons/apple-touch-icon-57x57.png">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
<script src="../AppScroll.js"></script>
<script>
window.onload = function(){
window.scroller = new AppScroll({
toolbar: document.getElementsByClassName('bar-title')[0],
scroller: document.getElementsByClassName('content')[0]
});
document.getElementById('on').addEventListener('click', function(e){
e.preventDefault();
window.scroller.on();
});
document.getElementById('off').addEventListener('click', function(e){
e.preventDefault();
window.scroller.off();
});
};
</script>
<!-- Intro paragraph styles. Delete once you start using this page -->
<style type="text/css">
.welcome {
line-height: 1.5;
color: #555;
}
</style>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<a href="#" id="on" class="button">On</a>
<h1 class="title">AppScroll</h1>
<a href="#" id="off" class="button">Off</a>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<div class="content-padded">
<p class="welcome">AppScroll is a tiny JS library that fixes the "website dragging" issue caused on iDevices.</p>
</div>
<ul class="list inset">
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
<li><strong>List Item</strong></li>
</ul>
</div>
</body>
</html>