making iscroll to work when loading a div dynamically

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.

score 14 · Answer 1 · answered Aug 18 '12 at 21:55

14

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

myScroll.refresh();

answered Aug 18 '12 at 21:55

Martin Carlsson

306
2
4

John Snau · Answer 2 · 2013-07-25T01:43:15.463

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.

same for me, refresh alone didn't work, but setTimeout did solve the issue, thanks. — Yasmine, Jul 07 '13 at 21:46

score 3 · Answer 3 · edited May 26 '16 at 08:37

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

edited May 26 '16 at 08:37

Nicolas Filotto

43,537
11
94
122

answered Nov 11 '11 at 22:47

ryuutatsuo

3,924
3
27
29

*Meant to be destroy() – Ben Taliadoros Sep 18 '14 at 10:43

score 0 · Answer 4 · answered Apr 11 '15 at 07:46

0

To watch height changes:

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

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

answered Apr 11 '15 at 07:46

Kiryl Anokhin

429
4
10

score -1 · Answer 5 · answered Mar 12 '16 at 04:26

-1

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

answered Mar 12 '16 at 04:26

Trang Le

71
1
1

making iscroll to work when loading a div dynamically

5 Answers5

Linked