making iscroll to work when loading a div dynamica

Question

can anyone please explain, with an example if possible, how to load dynamic content inside an iscroll div and assign a new height to it?

I can get it to work but I can't control the height of the scroll for the new content.

I'm new to all this and have no clue were to start.

here's what I'm working on:

http://homepage.mac.com/jjco/test/index7.html

when the page is loaded you see the scroll bar where there's no content... clicking on print/damm (shows the height I originally set for this content) clicking on print/fcbarcelona (maintains the same height and position of the scroll you used before) as you see it's not working as it should. obviously, I don't want the scroll to be there when it's not necessary.

any help would be greatly appreciated.

Answer 1

It's better to use the refresh() method in iScroll, which will recalculate the height.

myScroll.refresh();

Answer 2

Take a look at iScroll4
In iscroll.js, I see experimental option: checkDOMChanges: false,// Experimental
You can enable and use it.

Answer 3

try this, when you insert your new data into iScroll do these steps

//myScroll is a global variable you initialize iScroll on
myScroll.destroy();
myScroll = null;
loaded();//this is a functions where you have have your iScroll initializer 

Answer 4

To watch height changes:

setInterval(function () {
    var newScrollerHeight = $scroller.innerHeight();

    if (newScrollerHeight !== prevScrollerHeight) {
         prevScrollerHeight = newScrollerHeight;
         myScroll.refresh();
    }
}, 500);

Answer 5

I had a similar problem, and just refresh() didn't help, so didn't help destroying and recreating iScroll. In my case I was loading a lot of elements into iScroll div. What did solve the problem is setTimeout(). As MASTERING THE REFRESH() METHOD said adding even 0ms to a setTimeout() would solve a lot of problems. In my case it was 500ms. =

here is code sample:

    var myScroll;

    function createIScroll(){
    myScroll = new iScroll('wrapper');
    }

    function iScrollRefresh(){
      setTimeout(function(){
         myScroll.refresh(); 
      }, 500);
    }
$ajax(){ 
//receiving data
}
function someFunction(){
  //dynamic content is created
  iScrollRefresh();
}

My problem was that refresh() function was executed before content was inserted into DOM, so increasing timeout helped. I hope it helps to beginners like me.