Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 77182a3cea
Fetching contributors…

Cannot retrieve contributors at this time

251 lines (246 sloc) 20.413 kB
<!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">
<head>
<title>jQuery.overscroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#overscroll { width: 500px; height: 500px; overflow: hidden; border: solid 1px #000; margin: 30px auto; position: relative; }
#overscroll ul { width: 2500px; margin:0; padding: 0; }
#overscroll li { display: block; float: left; width: 100px; height: 100px; background-color: #FFF; }
#overscroll li.alt { background-color: #C00; }
#overscroll li.no-drag { background-color: #000; color: #FFF; }
#overscroll li.last { clear: both; visibility: hidden; height: 0; padding: 0; }
</style>
</head>
<body>
<h1>jQuery.overscroll</h1>
<div id="overscroll">
<ul>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li><a id="link" href="javascript:void(0)">Click Me!</a></li><li class="no-drag">Can't drag me!</li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li></li><li class="alt"></li><li></li><li class="alt"></li><li></li><li class="alt"></li>
<li class="last"></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.overscroll.js"></script>
<script>
$(function(o){
o = $("#overscroll").overscroll({
cancelOn: '.no-drag',
//hoverThumbs: true,
//persistThumbs: true,
//showThumbs: false,
scrollLeft: 200,
scrollTop: 100
}).on('overscroll:dragstart overscroll:dragend overscroll:driftstart overscroll:driftend', function(event){
console.log(event.type);
});
$("#link").click(function(){
if(!o.data("dragging")) {
console.log("clicked!");
} else {
return false;
}
});
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.