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();
                },

 

DEMO下载地址：http://pan.baidu.com/share/link?shareid=2395045927&uk=4211948937