1.first,you can visit http://www.sanraul.com/2011/01/12/jquery-wrapper-for-iscroll/, and download iscroll.js and iscroll_wrapper.js,add to you project.
2.copy flowing code to your test.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<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" />
<title>Insert title here</title>
<style type="text/css" media="all">
body,ul,li {
padding: 0;
margin: 0;
border: 0;
}
#
#wrapper {
height: 200px; /* Of course you need to specify the object height */
position: relative;
/* On older OS versions "position" and "z-index" must be defined (absolute | relative), */
z-index: 1;
/* it seems that recent webkit is less picky and works anyway. */
width: 100%;
background: #aaa;
overflow: hidden;
}
#scroller { /* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
float: left;
width: 100%;
padding: 0;
/* -webkit-box-shadow:0 0 8px #555; /* Don't use box shadows, they slow down drastically CSS animations */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li><a href="#"
onclick="myScroll.scrollToElement('#row10');return false">Scroll
to row 10 (default runtime)</a>
</li>
<li>Pretty content row 2</li>
<li>Pretty content row 3</li>
<li>Pretty content row 4</li>
<li>Pretty content row 5</li>
<li>Pretty content row 6</li>
<li>Pretty content row 7</li>
<li>Pretty content row 8</li>
<li>Pretty content row 9</li>
<li id="row10"><a href="#"
onclick="myScroll.scrollToElement('#scroller > ul > li:last-child', '0s');return false">Go
to bottom (skip to, no animation)</a>
</li>
<li>Pretty content row 11</li>
<li>Pretty content row 12</li>
<li>Pretty content row 13</li>
<li>Pretty content row 14</li>
<li>Pretty content row 15</li>
<li>Pretty content row 16</li>
<li>Pretty content row 17</li>
<li>Pretty content row 18</li>
<li>Pretty content row 19</li>
<li><a href="#"
onclick="myScroll.scrollToElement('#scroller > ul > li', '1s');return false">Go
back to top (1s runtime)</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/iscroll-min.js"></script>
<script type="text/javascript" src="../js/iscroll_jquery_wrapper.js"></script>
<script type="text/javascript">
$(function(){
var elem = $('#scroller');
elem.iscroll();
elem.bind('onScrollEnd', function(e, iscroll){
alert($(this).attr('id') +' - '+ iscroll);
});
});
</script>
</body>
</html>
3.run it.
浙公网安备 33010602011771号