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

scroll mobile-safari vertical-scrolling mobile-webkit
Bryce picture Bryce · Feb 14, 2013 · Viewed 12.7k times · Source

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

Patrick Rudolph picture Patrick Rudolph · Sep 8, 2013

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.

Related questions

ipad safari: disable scrolling, and bounce effect?

I'm working on a browser based app, currently I'm developing and styling for the ipad safari browser. I'm looking for two things on the ipad: How can I disable vertical scrolling for pages that don't require it? & how can …

Read More
Can't prevent `touchmove` from scrolling window on iOS

We are trying to scroll an element on our iOS web app while preventing the window itself from scrolling. We are capturing the touchmove event on the window, scrolling the element programmatically and (trying to) prevent the window itself from …

Read More
Looking for an alternative for iScroll (Scrolling Div's on iOS/Webkit)

I built a complex forms over data mobile application and am now looking for a solution to persist the position of the title and the footer bar. In my dummy, which has been developed and tested with Chrome and Safari …

Read More