Skip to content Skip to sidebar Skip to footer

Iscroll A Dynamically Filled Div Only Without Scrolling Main Page Also

So this post might get lengthy but I'm stuck with iScroll. What I'm doing is populating my list with articles and when one gets clicked, I'm sliding in a div over the list to disp

Solution 1:

I finally got it to work. What I needed to do is add another div inside the wrapper div. I'll share the code so hopefully it helps someone else Here's what the new code looks like:

<body><!--Added scroller div(without iScroll it works also...just make two divs so the body isn't scrolled but the second div is scrolled--><divid="wrapper"><divclass="scroller"><header>Main News</header><ulid="daily"></ul><ulid="exclusive"></ul><ulid="must"></ul><ulid="main"></ul><ulid="ukr"></ul><ulid="nba"></ul><ulid="euro"></ul></div></div><divid="container"><divclass="scroller"><divid="header"><buttononclick="hide();">Back</button></div><divid="content"></div></div></div><script>
        $('body').on('touchmove', function(e){
            e.preventDefault();
        });
//prevents native scrolling so only iScroll is doing the scrolling//after the AJAX call to get the content, declare your iScroll variablevar myScroll;
            myScroll = newiScroll('wrapper');
            setTimeout (function(){
                myScroll.refresh();
            }, 2000);

    //set time out to give the page a little time to load the content and refresh your iScroll variable so it takes in the entire content of the wrapper divvar myScroll1;
        myScroll1 = newiScroll('container');
//I defined my second iScroll variable here so I can destroy it in the next part...//function sayhi(url) stays the same but in success of AJAX looks like this:success: function(content){
                    $('#content').append(content);
                    myScroll1.destroy();
                    myScroll1 = null;
                    myScroll1 = newiScroll('container');
                    setTimeout (function(){
                        myScroll1.refresh();
                    }, 2000);
                }
//when the div slides on the screen and content gets loaded, destroy your second iScroll//variable, set it to null and define it all over again so it takes in the entire content

And that's it. Works perfectly now with two divs which need to use iScroll on the same page. Hope the explanation is clear enough and helps someone!!!

Post a Comment for "Iscroll A Dynamically Filled Div Only Without Scrolling Main Page Also"