combining jquery mobile tabs and scrollable content

Question

I have a mobile app implemented with cordova.

I've used JQuery, JQuery Mobile, Iscroll and Iscrollview to make a a div on one page scrollable.

Here is the html of the scrollable dive:

<div data-role="page" align="center" id="index">

    <div data-role="header" style=""><h1 style="">Index page</h1></div>

    <div data-role="content" align="left" style="" id="contentId" >

       <div id="myScrollableDiv" class="example-wrapper" data-iscroll='{"bounce":false}'>
          <ul id="myUL" style=""  data-role="listview"></ul>
       </div>

    </div>

    <div id="footer" style="" data-role="footer" >
        <button style="" id="footerOkButton" type="button" >OK</button>
    </div>    
</div>

Now I want to add tabs. I want the scrollable div to be on the first tab.

So I restructured my html and now this entire page scrolls when I only want the stuff in myScrollableDiv to scroll:

<div data-role="tabs" id="tabs" style="display:none;">
      <div data-role="navbar">
        <ul>
           <li><a href="#tabs-1">Tab 1</a></li>
           <li><a href="#tabs-2">Tab 2</a></li>
           <li><a href="#tabs-3">Tab 3</a></li>
        </ul>
      </div>

      <div align="center" id="index" class="ui-content">
         A text area: <textarea id="myTextArea"></textarea></br>
         Some text<br>
        <div data-role="content" align="left" style="" id="contentId" >

           <div id="myScrollableDiv" class="example-wrapper" data-iscroll='{"bounce":false}'>
            <ul id="myUL" style=""  data-role="listview">
            </ul>
           </div>

        </div>
      </div>

      <div id="tabs-2" class="ui-content">
         <p>tab 2</p>
      </div>

      <div id="tabs-3" class="ui-content">
         <p>tab 3</p>
      </div>
 </div>

Has anyone successfully married JQuery Mobile tabs with IScroll/IScrollView?

If you were faced with this problem, how would you go about figuring out what's wrong?