ajax - Jquery mobile page transitions iScroll refresh -

i've got multiple html pages use jqmobile framework; within these pages i'm using iscroll create native scrolling effect, works fine.

i run problems when using jqm page transitions iscroll, since it's loaded via ajax know need refresh iscroll on new page can correctly calculate height , width after dom has changed.

i've looked , experimented code (tried refresh() , destroying , recreating) can't see work, iscroll works it's not getting refreshed on page change (therefore not working), ideas?

code below!

<div data-role="page">     <div data-role="header">      </div><!-- /header -->      <div data-role="content">     <div id="wrapper">         <div id="scroller">             <p>page content goes here.</p>             <a href="jquery_mobile_2.html"  data-transition="slide">page 2</a>         </div>     </div>     </div><!-- /content -->      <div data-role="footer">         <div data-role="navbar">             <ul>                 <li><a data-ajax="false" href="javascript:void(0);" onclick="homepage();"><img width="34px" height="34px" src="images/home_img_v2.png" /><!--<span class="nav">home</span>--></a></li>                 <li><a data-ajax="false" href="guide.html" class="ui-btn-active ui-state-persist"><img width="35px" height="33px" src="images/guide_img_v2.png"><!--<span class="nav">guide</span>--></a></li>                 <li><a data-ajax="false" href="taxcalculator.html"  /><img width="76px" height="34px" src="images/calculator_img_v2.png" /><!--<span id="calc" class="nav">calculator</span>--></a></li>             </ul>         </div>     </div><!-- /footer --> </div><!-- /page --> 

using refresh()

var myscroll;  function loaded() {      myscroll = new iscroll('wrapper', { hscrollbar: false, vscrollbar: false, checkdomchanges: true});     settimeout(function() {               myscroll.refresh();    }, 100);  }   document.addeventlistener('touchmove', function (e) { e.preventdefault(); }, false); document.addeventlistener('domcontentloaded', function () { settimeout(loaded, 200); }, false); 

destroying iscroll , recreating

var myscroll;  function loaded() {      myscroll = new iscroll('wrapper', { hscrollbar: false, vscrollbar: false, checkdomchanges: true});     settimeout(function() {               myscroll.destroy();            myscroll = null;         myscroll = new iscroll('wrapper', { hscrollbar: false, vscrollbar: false, checkdomchanges: true});      }, 100);  }   document.addeventlistener('touchmove', function (e) { e.preventdefault(); }, false); document.addeventlistener('domcontentloaded', function () { settimeout(loaded, 200); }, false); 

try calling initialising iscroll when jqm pageshow event fires e.g. in jqm 1.3.1:

$(document).on('pageshow', function (event, ui) {     myscroll = new iscroll('wrapper', { hscrollbar: false, vscrollbar: false, checkdomchanges: true}); });