I was trying to make one of our web application, which was in Java, run properly, without any UI issue on various browsers on different platforms ie. Windows, Mac, Linux (Firefox, Safari, Chrome, Internet Explorer 7/8) including mobile devices (iPhone, iPad, Blackberry). I coded the CSS and HTML structure that way and I was successful to make it. But when it comes to test on iPhone the vertical scrollbar was gone.

The standard javascript or advanced css tricks was fail to make the contents scrollable. After searching little more I found a script that works on iPhone (http://cubiq.org/scrolling-div-on-iphone-ipod-touch).

I was not aware that there are some events particularly for iPhone/iPad. Those events are ‘touchstart’, ‘touchmove’, ‘touchend’, ‘webkitTransitionEnd’.

Things that are needed:

1. Javascript

You will need jscroll.js javascript file to work. You will also need following function:

var myScroll;
function loaded() {
  setTimeout( function() {
    document.ontouchmove = function(e) { e.preventDefault(); return false; }
    myScroll = new iScroll( document.getElementById('scroller') );
  }, 100);
}
window.addEventListener('load', loaded, true);

2. CSS

optional. Seems to work with absolute, relative and without it

#wrapper {
  position: relative;
  z-index: 1;
  height: 200px;
  overflow: hidden;
}
#scroller {
  position:absolute;
}

Matteo Spinelli said that #scroller position is optional for this. But I came to know that the position is required for #scroller.

3. HTML

<div id="wrapper">
  <div id="scroller">
    your contents will be here
  </div>
</div>

4. Anchor links (optional)

<a href="#" onClick="myScroll.scrollTo(0, '500ms');return false">scroll to top</a> |
<a href="#" onClick="myScroll.scrollTo(myScroll.maxScroll/2, '500ms');return false">scroll to middle</a> |
<a href="#" onClick="myScroll.scrollTo(myScroll.maxScroll, '500ms');return false">scroll to bottom</a>