How can I programmatically show the address bar in Mobile Safari on iPhone via JavaScript?

Question

If you view a website via mobile Safari and you scroll up to the very top, it will show the address bar.

On my website I must use iScroll which works great so far but when I scroll up, it won't show the address bar because iScroll only fakes scrolling within an own <div> element without using the browser's native scrolling behaviour.

For the user, this is a usability nightmare though because then the only way to show the address bar is to tap the thin black bar on the very top of the iPhone screen and I noticed that some users don't know this.

So, I thought, maybe there is a way to programatically show the address bar when the user has scrolled to the very top of the iScroll container?

Answer 1

For iOS version 5+ I found this solution to simply replace iScroll: http://damien.antipa.at/2012/10/16/ios-pull-to-refresh-in-mobile-safari-with-native-scrolling/

The basic idea is to use:

<div class="scrollable">
 Foo
</div>

.scrollable{
 overflow-y:auto;
 -webkit-overflow-scrolling:touch;
 -webkit-transform:translateZ(0);
}

This does the trick. For older iOS versions (4 and lower) there is no solution for this problem (at least I couldn't find any).