Question

I cant seem to get iScroll to work on the iPad and spent a few days trying to figure it out with no luck, so hopefully someone can help me out. Below is the code:

I first include the js files:

<script type="text/javascript" src="/js/iscroll.js?v3.7.1"></script>
<script type="text/javascript" src="/js/ipad_scroller.js"></script>

iscroll.js is the iscroll source. The second is a custom js I created based off the example they give on iscroll site which contains the following code:

 var deviceAgent = navigator.userAgent.toLowerCase();
 var agentID = deviceAgent.match(/(ipad)/);

 if(agentID) {

  var myScroll;
  var a = 0;
  function loaded() {
   setHeight(); // Set the wrapper height. Not strictly needed, see setHeight() function below.

   // Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
   myScroll = new iScroll('ipad_scroller', {vScrollbar:true});
  }

  // Change wrapper height based on device orientation. Not strictly needed by iScroll, you may also use pure CSS techniques.
  function setHeight() {
   var headerH = document.getElementById('ipad_header').offsetHeight,
    footerH = document.getElementById('ipad_footer').offsetHeight,
    wrapperH = window.innerHeight - headerH - footerH;
   document.getElementById('ipad_wrapper').style.height = wrapperH + 'px';
  }

  // Check screen size on orientation change
  window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false);

  // Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
  // If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

  // Load iScroll when DOM content is ready.
  document.addEventListener('DOMContentLoaded', loaded, false);

 }

Here is the css for the divs being used in the code:

#ipad_header {
 width:100%;
 height:250px;
}

#ipad_footer {
 width:100%;
 height:48px;
 padding:0;
 border-top:1px solid #444;
}

#ipad_wrapper {
height:100px;
        position: relative;
        overflow: auto; 
}

#ipad_scroller {
position: relative;
        width: 100%;
        z-index: 1;
        overflow: hidden;
        height: auto;
}

Then in the html page I have

<div id="ipad_header">//content at the very top that I want to stay on top as it scrolls</div>

<div id="ipad_wrapper">
  <div id="ipad_scroller">
  //The rest of my page content
  </div>
</div>

<div id="ipad_footer">Footer content here</div>

Now I had this working at one time, but for some reason it stopped working on the ipad. The weird thing is if I turn the ipad to its side in landscaping mode it hangs for a few seconds then the iscroll stuff works just fine. Then if I move the ipad back into portrait mode it hangs again but the scroll starts to work again as well in portrait mode. Can anyone please help me out on this? I am pulling my hair out trying to find out what went wrong. I do know I recently upgraded ipad to the latest OS version but I believe this issue was happening before I did that.

Answer 1

Well after messing around with it the only way it seemed to work is if I made the height of the ipad_scroller div 1800px and the height of the ipad_wrapper to 200px