关于isScroll如何使用

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