iscroll5 dynamic data, need to resize for it to scroll

Question

I am having this problem, my iscroll5 won't scroll until i resize the browser. I am loading dynamic data into the iscroll5. Wondering why is it doing that, it happened to me before when i was using swiper.

                 $.ajax({
   type: "POST",
   url: "http://test.com/detailpic.php",
   data: {"data":listingid2},
                dataType:'json',
            success: function(data2){ 
                console.log(data2);
                  for(var i=0; i<data2.length; i++) { 


                      var image = "http://test.com/image/"+data2[i].pic;






                    var image2=" <div class='slide'><img class='lazy' src='"+ image + "' width='100%'  id='viewer'/></div>"



  $("#content").append(image2);  



            }  



            }

         });


var scroller = new Array();
    console.log("iscroll5working");
$('.myclass').each(function test(){
    console.log("iscroll5working2");

    myScroller = new IScrollFix(this, {
        scrollX: true,
        scrollY: true,
        snap:true,
    });

    scroller.push(myScroller);


});

Edit:

var scroller = new Array();

    $('.myclass').each(function(){

    myScroller = new IScrollFix(this, {
        scrollX: true,
        scrollY: true,
        snap:true,
    });

    scroller.push(myScroller);
        setTimeout(function () {
        myScroller.refresh();
    }, 100);                                       

});

Answer 1

You can call iScrolls refresh function. It will update internal properties and recalculate width and height on both scroller and wrapper. That should do the trick for you.

Read more in iScroll docs: http://iscrolljs.com/#refresh

Here are the explaining text from the docs:

"iScroll needs to know the exact dimensions of both the wrapper and the scroller. They are computed at start up but if your elements change in size, we need to tell iScroll that you are messing with the DOM. This is achieved by calling the refresh method with the right timing. Please follow me closely, understanding this will save you hours of frustration. Every time you touch the DOM the browser renderer repaints the page. Once this repaint has happened we can safely read the new DOM properties. The repaint phase is not instantaneous and it happens only at the end of the scope that triggered it. That's why we need to give the renderer a little rest before refreshing the iScroll."