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、页面的列表源码：

[html] view plain copy print ?

1. <div id="wrapper">  
2.     <div id="scroller">  
3.         <ul>  
4.             <li>...</li>  
5.         </ul>   
6.     </div>   
7. </div>  

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

       

       2、页面css样式：

[css] view plain copy print ?

1. #wrapper {  
2.      padding: 20px;  
3.      position: absolute;  
4.      z-index: 1;  
5.      top: 100px;  
6.      bottom: 60px;  
7.      left: 20px;  
8.      right:20px;  
9.      width: 80%;  
10.      overflow: auto;  
11. }  
12.    
13. #scroller {  
14.      position: absolute;  
15.      z-index: 1;  
16.      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
17.      width: 100%;  
18.      padding: 0;  
19. }  

        

         3、JavaScript：

[java] view plain copy print ?

1. document.addEventListener('deviceready',function(){  
2.                                         
3.                 var  myScroll = new iScroll('wrapper', {  
4.                         snap : 'li',  
5.                         momentum : false,  
6.                         hScrollbar : false,  
7.                         vScrollbar : false  
8.                 });  
9.             },true);  

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

         页面效果：