making iscroll to work when loading a div dynamically

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.

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

myScroll.refresh();

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.

ryuutatsuo

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

To watch height changes:

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

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

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

来源：https://stackoverflow.com/questions/7777156/making-iscroll-to-work-when-loading-a-div-dynamically

标签

dynamic

iscroll4