iscroll开发多层滚动嵌套

iscroll开发多层滚动嵌套
iscroll设置滚动典型的结构为
复制代码
<div id="wrapper">
<div id="scroller">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
...
</div>
</div>
复制代码
wrapper作为滚动的外层容器 它的大小为屏幕上看到的区域大小 大小可以随便设置 如果高度等于scroller的高度 则水平滚动 否则垂直滚动
scroller作为滚动的内层容器 如果是水平滚动 可以设置高度为子元素的高度 宽度为所有子元素宽度之和
嵌套滚动时候需要根据滚动的方向和滚动内容的大小 动态调整容器大小
一个简单的用来生成滚动对象的类：
复制代码
//数据模板对象
var scrollModel = function(){
this.wrapper = document.createElement("div");//外层容器ID
this.scroller = document.createElement("div");//滚动对象ID
};
scrollModel.prototype = {
setWrapperStyel:function(O){
//设置外层容器属性
for(var i in O){
if(typeof(i) == "string"){
this.wrapper.setAttribute(i,O[i]);
}
}
},
setScrollerStyel:function(O){
//设置滚动容器属性
for(var i in O){
if(typeof(i) == "string"){
this.scroller.setAttribute(i,O[i]);
}
}
},
setMemberInfo:function(htmlStr){
　　　　//设置滚动容器的内容
this.scroller.innerHTML = htmlStr;
},
show:function(){
this.wrapper.appendChild(this.scroller);
document.body.appendChild(this.wrapper);

}
};
复制代码
如果需要在一个滚动容器中添加一个滚动容器需要重写show方法
外层的滚动容器
复制代码
//信息页面外层左右滑动框架
(function(){
var sectionScroll = new scrollModel();
sectionScroll.setWrapperStyel({"id":"sectionWraper","style":"width:"+screenSize().width+"px;height:"+(screenSize().height-100)+"px;"});
sectionScroll.setScrollerStyel({"id":"sectionScroller","style":"height:"+(screenSize().height-100)+"px;"});
sectionScroll.show();
})();

复制代码
内层滚动容器
复制代码
(function(){
var thisNavNum = 0;
for(var i in model.list[0]){
thisNavNum++;
(function(){
var articleScroll = new scrollModel();
articleScroll.setWrapperStyel({"id":i,"style":"width:"+screenSize().width+"px;height:"+(screenSize().height-100)+"px;"});
//重写show方法
var thisScrollId;
articleScroll.show = (function(){
thisScrollId = i+"Scroller";
articleScroll.setScrollerStyel({"id":thisScrollId});
articleScroll.wrapper.appendChild(articleScroll.scroller);
})();
document.getElementById("sectionScroller").appendChild(articleScroll.wrapper);
})();
}
$("#sectionScroller").width((screenSize().width*thisNavNum)+10);
var sectionWraper = new iScroll("sectionWraper",{snap: true,momentum: false,hScrollbar:false,vScrollbar:false});

})();
复制代码

嵌套最关键的一点需要注意事件的冒泡
可以修改iscroll源代码解决
onBeforeScrollStart: function (e) {
if(e.srcElement.id.indexOf("_img_")>0||e.srcElement.parentNode.parentNode.id.indexOf("_img_")>0){
e.stopPropagation();
}
e.preventDefault();
},