jQuery Mobile iScroll5 Bind

Question

I have a simple jQuery Mobile example with 2 pages and listviews. I'm trying to figure out the best way to bind iScroll. Please checkout my pen below. Currently I've included iScroll but I'm not sure how to properly bind and refresh

http://codepen.io/aherrick/pen/LzCFJ

HTML:

<div id="first" data-role="page">

    <div data-role="header" data-position="fixed" data-tap-toggle="false">
      <h1>iScroll-ify Me Please!</h1>
    </div>

    <div role="main">

        <div id="scroll-wrap">
            <ul id="my-list" data-role="listview"></ul>
        </div>
    </div>

    <div data-role="footer" data-position="fixed" data-tap-toggle="false">

        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="gear"></a></li>
                <li><a href="#" data-icon="home"></a></li>
            </ul>
        </div>
    </div>
</div>

<div id="second" data-role="page">

    <div data-role="header" data-position="fixed" data-tap-toggle="false">

              <a href="#first" data-role="button" data-icon="arrow-l" data-iconpos="notext">Home</a>

      <h1>Scroll Me <span id="id"></span></h1>
    </div>

    <div role="main">

        <div id="scroll-wrap2">
            <ul id="my-list2" data-role="listview"></ul>
        </div>
    </div>

    <div data-role="footer" data-position="fixed" data-tap-toggle="false">

        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="check"></a></li>
                <li><a href="#" data-icon="star"></a></li>
            </ul>
        </div>
    </div>
</div>

JS:

$(function () {

    $.mobile.paramsHandler.addPage('second', ['id'], null, secondLoad);
    $.mobile.paramsHandler.init();
});

$(document).on('pageinit', '#first', function() {

    // simulate an AJAX call
  setTimeout(function() {

    var text = '';
    var list = $('#my-list').empty();
    for (i = 0; i < 100; i++) { 
      text += '<li><a href="#second?id='+i+'">data loaded from AJAX '+i+'</a></li>';
        }

    list.append(text).listview('refresh');

  }, 1000);
});

function secondLoad(parms) {

  $('#id').text(parms.id);

  // simulate a long AJAX call
  setTimeout(function() {

    var text = '';
    for (i = 0; i < 100; i++) { 
        text += '<li><a href="#"><img src="http://images.nike.com/is/image/DotCom/THN_PS/Nike-Strike-Football-SC2140_144_A.jpg?fmt=jpg&qty=85&wid=620&hei=620"><h2>data loaded from AJAX '+parms.id+'</h2></a></li>';
        }

    $('#my-list2').empty().append(text).listview('refresh');
  }, 2500);
}

function initScroll(elmId) {

    var $this = $(elmId);

    $this.css('position', 'absolute')
      .css('overflow', 'hidden')
      .css('top', '0')
      .css('bottom', '0')
      .css('left', '0')
      .css('width', '100%');

    return new IScroll($this.get(0), {
        eventPassthrough: false,
        scrollX: false,
        scrollY: true,
        preventDefault: false,
        scrollbars: true,
        mouseWheel: true,
        interactiveScrollbars: true,
        shrinkScrollbars: 'clip',
        useTransition: false,
        bindToWrapper: true,
        bounceEasing: 'elastic',
        bounceTime: 1200,
        probeType: 3, // watch the scroller
        fadeScrollbars: false
    });
}

Answer 1

How about right after appending the listitems and refreshing the listview:

list.append(text).listview('refresh'); 
var page1Scroll = initScroll("#scroll-wrap");

and

$('#my-list2').empty().append(text).listview('refresh');
var page2Scroll = initScroll("#scroll-wrap2");

Updated PEN