iScroll的產生完全是因爲移動版webkit瀏覽器，例如在iPhone，Android 的移動設備上。
iScroll的原理是外層有一個溢出隱藏（overflow:hidden;）的DOM，然後這個區域內的第一個DOM結構會被實例化，其包裹的內容可以縱向或者橫向的滾動，所以在使用iScroll的時候，滾動元素要儘量的簡單，減少DOM個數，減少嵌套，因爲DOM結構越是複雜iScroll運行起來就越是吃力，有可能會造成某些節點顯示不正常的情況。 所以，推薦使用的DOM結構如下：
<div id="wrapper">//overflow:hidden;
<ul>
//只有第一個DOM結構（ul）被實例化，這個DOM可以縱向或者橫向的滾動，
//多出的內容會被wrapper的樣式hidden。
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>注意：再次重申，只有wrapper裏的第一個子元素（ul）纔可以被實例化滾動，並且要結合外層的DOM（wrapper）才能實現滾動。
iscroll上拉加載下拉刷新
附上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
html,body{
height:100%;
}
html,body,div,ul,li{
padding: 0;
margin: 0;
}
ul,li{
list-style-type: none;
}
#wrapper{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling:touch;
}
#scroller {
position:relative;
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
/**
*
* 下拉樣式 Pull down styles
*
*/
#pullDown, #pullUp {
background:#fff;
height:40px;
line-height:40px;
padding:5px 10px;
border-bottom:1px solid #ccc;
font-weight:bold;
font-size:14px;
color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon {
display:block; float:left;
width:40px; height:40px;
/*background:url([email protected]) 0 0 no-repeat;*/
-webkit-background-size:40px 80px; background-size:40px 80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:250ms;
}
#pullDown .pullDownIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
/**
* 動畫效果css3代碼
*/
#pullDown.flip .pullDownIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullUp.flip .pullUpIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
</style>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
</div>
<ul id="thelist">
<li>數據 1</li>
<li>數據 2</li>
<li>數據 3</li>
<li>數據 4</li>
<li>數據 5</li>
<li>數據 6</li>
<li>數據 7</li>
<li>數據 8</li>
<li>數據 9</li>
<li>數據 10</li>
<li>數據 11</li>
<li>數據 12</li>
<li>數據 13</li>
<li>數據 11</li>
<li>數據 12</li>
<li>數據 13</li>
<li>數據 6</li>
<li>數據 7</li>
<li>數據 8</li>
<li>數據 9</li>
<li>數據 10</li>
<li>數據 11</li>
<li>數據 12</li>
<li>數據 13</li>
<li>數據 11</li>
<li>數據 12</li>
<li>數據 13</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加載更多...</span>
</div>
</div>
</div>
<script type="text/javascript" src="../dist/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../dist/js/iscroll-probe.js"></script>
<script type="text/javascript">
$(function(){
// 初始化並配置 iscroll
var upFlag = false;
var downFlag = false;
var myScroll = new IScroll("#wrapper",{
mouseWheel: true,
bounch:true
});
// 滾動綁定事件
myScroll.on("scrollEnd",function(){
if(this.y <= this.maxScrollY && !upFlag){
upFlag = true;
setTimeout(function(){
$("#thelist").append("<li>上拉加載數據</li><li>上拉加載數據</li><li>上拉加載數據</li>");
myScroll.refresh();
upFlag = false;
},1000);
}
if(this.y <= 0 && !downFlag){
downFlag = true;
setTimeout(function(){
$("#thelist").prepend("<li>下拉刷新</li>");
myScroll.refresh();
downFlag = false;
},1000);
}
});
// 這個scroll要在iscroll-probe.js中才有用，但是貌似沒用，監聽滾動
myScroll.on("scroll",function(){
});
});
</script>
</body>
</html>