making iscroll to work when loading a div dynamically - dynamic

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

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.

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

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