Force Address Bar to Show in Mobile Chrome App

How to make address bar always visible on mobile browsers?

The other solutions on stackoverflow (such as this one) talk about preventing the body from scrolling. You are setting the body height, which is good, but the body still has a scrollbar. Try:

• Setting the body overflow to hidden.
• Adding a new div that is height: 100%; and overflow: auto. Put the entire page inside this div. The div will have the scrollbar instead of the body. (Read the linked solution carefully).

Now, reasons I would discourage this:

1. Users will hate you if you break the workflow they are used to. It is almost never the right thing to do.
2. Scrolling the body is always much faster than a div scrolling. You will see very noticeable performance decreases if the page is very big at all.

Update: Address bar being moved

Chrome on Android is experimenting with moving the address bar down to the bottom of the screen to be more accessible for single-hand use. This is a great example of why a web page should never try to add hacks to work around browser behavior.

Javascript: always show Chrome address bar

You can create a div, set the height to 100% and use overflow-y:auto;.

If you would copy this code and paste it into your project, you will see this is what you're looking for.

Please use this with caution, I personally love that chrome hides the navigation bar.

Example:

/* You NEED to set the container height */html, body {  height:100%;}
/* Then override the scrollbar by a custom scrollable element: */.customnavigation {  height:100%;  overflow-y:auto;}

<div class="customnavigation">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150">  <img src="http://placehold.it/150x150"></div>

Related Topics