Browser Address Bar Remains Visible When Scrolling

ionic-v1
1

I am trying to hide the browser navigation address bar in a web application built with Ionic. I am not using the native wrapper just yet so the plugins are not really an option. Before iOS 8.0 I was partially happy with the fact that the address bar would disappear when the user would scroll the page but that is no longer happening. The same browser hides the address bar for other web apps so my first guess is the behavior is caused by the virtual scrolling.

My goal is to always hide the address bar but I would settle for hiding it when the users scroll at least 1px.

Does anyone have a solution to this?

2

You can try to scroll 1px down when the deviceready event has fired. (Deviceready works too on desktop or mobile browser without cordova)

This might do the browser to detect the scroll and hide the nav bar.

3

Hi Bonda,

Thx for the reply. It didn’t help as the content is loaded after the device is ready thus the view is not larger than the screen. I also believe that the event name changed to “platformready” as I’ve tried with both and only the “platformready” handler was executed.

I am using ion-tabs for my main application container and I believe that inside the tabs there’s a soft container that doesn’t trigger the native scroll. If someone from the Ionic team could confirm that would be great.

Thx in advance.

4

I believe that modern browsers have a fullscreen API that can be used in HTML5
You can try to trigger the fullscreen mode in your platformready event.

Here you can see more info and also a video example:
http://www.html5rocks.com/en/mobile/fullscreen/?redirect_from_locale=es