What you'll need
Note that this code is written for WebKit based browsers, but should work in principle on other touch browsers as well.
your content here
Notice that the content is inside of a div within the holder div, this is because you can't scroll the div in which the touch event is attached to.
-webkit-box-shadow: 3px 3px 5px #000;
Not much revolutionary here, but do note that we set the "overflow" property to auto on the content div, not the holder itself. Also, we set the "-webkit-user-select" to "none" on the content div, thereby preventing the user of selecting the content. This is optional.
There are three main touch events:
- touchstart - Called when a finger touches the listening container (finger down)
- touchmove - Called repeatedly when a finger moves (finger down and moving)
- touchend - Called when a finger leaves the listening container (finger up)
Each of these methods gives us an event with a touches array. Remember, there might be more than one finger since these APIs are made to handle multitouch devices. To get a hold of the vertical position of one finger you would query the touches array for one finger and get it's pageY property, like this:
From this we can calculate and set the scrollTop property of the content container. But, wait! If you try this the rest of the page will also scroll, not what we wanted. The reason why this happens is because the touch event bubbles all the way up to the window, making the browser think it needs to scroll the window because you have dragged your finger on it. We need to tell the event to stop bubbling, we will handle the event ourselves. We do this by calling:
var scrollArea = document.getElementById('holder');
startPos = e.touches.pageY;
var touch = e.touches;
var targetBox = e.currentTarget.getElementsByTagName("div");
var fingerMoved = startPos - touch.pageY;
startPos = touch.pageY;
targetBox.scrollTop = targetBox.scrollTop + fingerMoved;
This is just a simple example, but it's something you'll probably end up using a lot. Speaking of...
When should you override the default window scroll
On an iPhone there is not as much need for this method as you'll probably scroll the entire screen in most cases anyway. However, the iPad is a different story. Take a look at the iPad version of gMail created by Google. They are using this method with success, and they have added inertia scrolling as well. This can be accomplished using the last touch event we did not implement, touchend. Maybe more on this in a later post. Anyway, you should use you own scrolling when it's appropriate to scroll only a part of the app, like a spilt view list or something like that.