-webkit-overflow-scrolling:touch and 'Tap status bar to scroll to top'

Question

Navigate to this fiddle on an iPhone and notice that even though there is a -webkit-overflow-scrolling:touch declaration, the 'tap to top' feature still works. This was tested on an iPhone 4 running iOS 6.1 and an iPhone 4S running iOS 5.0.1.

This test raises the question: does declaring -webkit-overflow-scrolling:touch affect the 'tap status bar to scroll to top' behaviour in iOS?

Answer 1

If you put -webkit-overflow-scrolling:touch on any element other than document.body, it will break the default tap status bar to scroll to top behaviour.

There is a tiny script on GitHub, that works as a replacement for the missing scroll to top of iOS overflow scrolling. You can put it on your apps header to achieve nearly the same result.

Answer 2

From my experience, it indeed affects it. I don't know of a way to have both features working at the same time, at least as of iOS 6.1.

I also have a quote from the jQuery Mobile docs that backs this up:

The -webkit-overflow-scrolling:touch property seems to disable the events to scroll you to the top of the page when the time is tapped in the status bar. We hope Apple fixes this because it's a very useful feature.

It is really unfortunate that Apple has it set up like this, as I too would love to use this feature, but the scroll-to-top ability is more important to me.