标签：
isScroll是用原生javascript写的实现局部滚动的一个库，它不依赖任何第三方框架。设计的初衷是为了解决移动webkit系浏览器的区域滚动问题，兼容safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。现已更新到isScroll5.
我们采用官网(http://iscrolljs.com/)推荐的html结构来举例：
1 <div class="wrapper"> 2 <ul> 3 <li>1</li> 4 <li>2</li> 5 <li>3</li> 6 <li>4</li> 7 <li>5</li> 8 <li>6</li> 9 <li>7</li> 10 <li>8</li> 11 <li>9</li> 12 <li>10</li> 13 <li>11</li> 14 <li>12</li> 15 </ul> 16 <br/> 17 </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:0; padding:0; //去掉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也是可以的。但是，正如官网中所推荐的，如果滚动区域里包含图片等，在这些元素还没有加载之前就完成了滚动条的初始化，isScroll在计算scrollbar的尺寸时就会发生错误。
上面留了一个问题：为什么容器要用position:relative呢？初始化的时候，scrollbars的值设置为true，会默认的在.wrapper所对应的元素后面添加一个子元素（appendChild)，新添加的元素相对于容器元素定位。所以，如果不给父容器写定位，滚动条就不会出现。
上面的步骤完成后，就能看到一个带着滚动条的区域了。但是当我缩放窗口的时候，.wrapper所对应的区域应该跟着缩放才对，这样就不会出现部分元素被遮挡的现象。我们用window的resize事件完成。
var oHeight = oWrap.innerHeight();
$(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
标签：
原文地址：http://www.cnblogs.com/yingge/p/5737994.html
