isScroll是用原生javascript写的实现局部滚动的一个库，它不依赖任何第三方库。设计的初衷是为了解决移动webkit系浏览器的区域滚动问题，兼容safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。现已更新到isScroll5.
我们采用官网(http://iscrolljs.com/)推荐的html结构来举例：
<div class="wrapper">
<ul>
<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>
</ul>
</div>
下面是对应的css部分：
.wrapper{
position:relative; //这个属性必须写，可以为relative或absolute。原因见js部分
margin:50px auto; //上下50px的margin, 水平居中
height:650px; //必须设定scrollbar容器的高度，只有当内容高度超过容器高度的时候，才会显示scrollbar
width:200px;
overflow:hidden; //当父容器高度不足时，只有通过滚动条才能看到超出的内容
background:#eee;
}
ul{
margin:;
padding:; //去掉ul默认的样式
list-style:none;
}
ul li{
border:1px solid #ccc;
height:50px;//所有的li高度加起来超过650px，即容器的高度时候，才会出现滚动条
width:100%;
}
在js代码中，首先要创建一个实例:
window.onload = function(){
var myScroll = new IScroll(".wrapper",{
mouseWheel:true, //侦听鼠标滚轮事件
scrollbars:true, //是否显示默认的滚动条
}) }
在这里，用的是onload事件，就这个例子来说，使用DOMContentLoaded也是可以的。但是，正如官网中所描述的，如果滚动区域里包含图片等，使用DOMContentLoaded事件，就会在图像等元素还没有加载之前执行了滚动条的初始化代码，scrollbar的计算就会不准确。
CSS部分留了一个问题：为什么容器要用position:relative呢？原因是在初始化的配置里，scrollbars为true，默认地，就在.wrapper所对应的元素后面添加一个子元素（appendChild)作为滚动条，而滚动条需要相对于容器定位。所以，如果不给父容器写定位，滚动条就不会出现。
上面的步骤完成后，就出现一个带着滚动条的列表区域了。但是当缩放窗口大小的时候，.wrapper所对应的区域也应该随着缩放。这部分逻辑用window的resize事件完成。
var oHeight = oWrap.innerHeight();//innerHeight是内容的height加上padding值
$(window).on("resize",scrollRefresh);//window的resize被触发，就执行scrollRefresh方法 function scrollRefresh(){
var curHeight = $(window).innerHeight()-parseFloat(oWrap.css("marginTop"))*2;//区域当前的高度=可视区域高度-上下margin
curHeight=curHeight>oHeight?oHeight:curHeight;//当窗口恢复正常大小时，容器高度不会超过原来的高度
oWrap.css("height",curHeight);
myScroll.refresh();//重绘.wrapper区域，包括计算包装器和滚动条的尺寸
}
大部分的功能已经实现了，但是还有一个问题。如果可视区域比较小，.wrapper因为被遮挡而不能滑动到底部，也就是看不到底下的内容。我自己想到的一个解决方案是在window.onload完成的时候，首先执行一遍scrollRefresh方法，获取可视区域的高度，根据可视区域的大小设置滚动
部分的位置和尺寸。
完整的代码请见： https://github.com/yinggeABC/kanbisai/blob/master/isScrollDemo.html