在开发的过程中,发现如果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);
由于是移动设备上使用,不想让滚动条出现占用空间,所以把其隐藏掉。
页面效果: