JQuery Mobile+ iscroll 列表滚动条的实现

        在开发的过程中，发现如果ul或者ol列表内容过多，高度大于外层div的高度的时候，JQuery Mobile会自动给加上滚动效果。但我在使用JQuery Mobile Panels的时候发现，在内容区域(content区域)加上ul或ol后，当列表数据多则滚动的时候，Header与Footer可以固定，但Revel Panel会随之滚动。

        设想：content区域的列表无论是滚动的什么位置，Header、Foote与Revel Panel都是固定的，所以得到的解决方案是，使content区域生成滚动条，而列表只在该区域滚动。

       

        经过搜索，发现有两个插件是可以实现这样的效果的。一个是jquery scroll滚动插件 - jquery-nicescroll,另一个是使用iscroll。由于iscroll的相关资料在网络上更容易获取，所以决定使用iscroll。

     

      JQuery Mobile Panels的文档与例程地址：http://view.jquerymobile.com/1.3.0/docs/widgets/panels/

        IScroll 官网 ： http://cubiq.org/iscroll

       使用：

       1、页面的列表源码：

<div id="wrapper">
    <div id="scroller">
        <ul>
            <li>...</li>
        </ul> 
    </div> 
</div>

      这里必须有两个div包住列表，作为滚动条出现在区域使用。
        

       

       2、页面css样式：

#wrapper {
	 padding: 20px;
	 position: absolute;
	 z-index: 1;
	 top: 100px;
	 bottom: 60px;
	 left: 20px;
	 right:20px;
	 width: 80%;
	 overflow: auto;
}
 
#scroller {
	 position: absolute;
	 z-index: 1;
	 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	 width: 100%;
	 padding: 0;
}

        

         3、JavaScript：

document.addEventListener('deviceready',function(){
                                      
                var  myScroll = new iScroll('wrapper', {
                        snap : 'li',
                        momentum : false,
                        hScrollbar : false,
                        vScrollbar : false
                });
            },true);

         由于是移动设备上使用，不想让滚动条出现占用空间，所以把其隐藏掉。

         页面效果：