javascriptgoogle-chromeaddress-bar

Javascript: always show Chrome address bar


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.


Solution

  • 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>