Javascript: always show Chrome address bar

Question

How to enable "always show" address bar in Chrome on a mobile device using Javascript?
In other words, don't hide when the user scrolls down.

Answer 1

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>