561
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的文檔與例程地址：https://view.jquerymobile.com/1.3.0/docs/widgets/panels/
IScroll 官網 ： https://cubiq.org/iscroll
使用：
1、頁麵的列表源碼：
<div >
<div >
<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);
由於是移動設備上使用，不想讓滾動條出現占用空間，所以把其隱藏掉。
頁麵效果：
最後更新：2017-04-03 20:51:31