jQueryMobile+iscroll实现列表滚动条

HTML5培训技术

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

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

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

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

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

使用：

1、页面的列表源码：

这里必须有两个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);
由于是移动设备上使用，不想让滚动条出现占用空间，所以把其隐藏掉。

页面效果：