How to disable horizontal dragging? (webkit-overflow-scrolling: touch;)

Question

We have vertical scrolling working fine with the following css for iOS 5's webkit scrolling 'touch', but we are still able to drag the page left and right. How can we disable left and right dragging?

Here is the CSS:

#page_content{

-webkit-overflow-scrolling: touch;
overflow-x:hidden;
overflow-y: scroll;   
position:absolute;
height: 460px;
width: 320px;

}

Here is the video:
http://dl.dropbox.com/u/1737103/scrolling.mov

Thanks in advance!

Answer 1

I found I could fix it by finding/fixing/removing elements that were wider than the width. For instance, if you have a 100% width on your container, and then an element inside has 100% width with margin or padding, even if the overflow is hidden on the container, the page will drag from side to side.

If you can make sure your elements inside don't horizontally spill outside the container, the page won't drag. If you need padding on a percentage width inside the container (like one element with 100% width, or two with 50% or whatever), 'box-sizing: border-box;' is the way forward.