无法在iPad上滚动网页

Question

On iPad I cannot scroll a web page. It works fine in Safari, Chrome and Firefox on OS X.

The page has an area in which content can be scrolled only horizontally. It consists of a container div which has width = 100% and height = (100% - 40px). I am setting the height by a JavaScipt function which is triggered by window resize events. Inside this container is another div with the width of the content (very wide, to avoid line breaks). Inside that is the content.

CSS properties of the container are:

overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;

See the page and full source code here: dcfoto.de

On iPad, scrolling is not possible. What am I doing wrong? By the way: resizing also does not work properly on orientation change. Maybe that's connected.

Answer 1

Unfortunately a two-finger swipe needs to be performed, and even then it is not responsive (when compared to the default one finger swipe scroll).

There are quite many javascript solutions out there, (sencha touch and iscroll being the most promising and advanced)

I would recommend http://cubiq.org/iscroll-4 which is hands down the coolest touch-scroll script out there. It also works for android, but quite more sluggishly since the default android browser albeit webkit based doesnot support css3 3d accelerated properties as good as the mobile safari one.

If I were you I would check for the user agent of the user, and deploy that script for android and ipad/iphone users.