Force address bar to show in mobile Chrome app

javascript jquery css google-chrome mobile

19,757

Solution 1

One workaround is to use a div as a scrollable container for body content. This way the body is not scrollable, but the inner div and Chrome doesn't autohide the address bar when this inner div is scrolled:

<body style="margin:0;padding:0;width:100%;height:100%">
  <div style="position:absolute;width:100%;height:100%;overflow:scroll">
    Content
  </div>
</body>

Scroll bar visible: http://jsbin.com/zibewepiwo

Scroll bar auto hide: http://jsbin.com/yeyapijulo

Tested in Chrome Beta 44.0.2403.63 and Chrome 43.0.2357.93 in Android 4.4.2 (Samsung Galaxy Tab 3).

Solution 2

body {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

referance from http://goratchet.com/examples/app-movies/

By chrome dev-tool, we could see source code.

Solution 3

Edit v2: One method that could potentially work is to use the 'Fullscreen API' and detect every time the user scrolls (using a jQuery method) - then tell the browser to exit fullscreen mode each time to keep the address bar. Bear in mind this is untested so tell me whether you have any luck with this method...

$(window).scroll(function(){
    document.webkitExitFullscreen();
    document.exitFullscreen();
});

Edit: Reading from the FAQ page for the mobile Chrome app it indicates that when scrolling the address bar is automatically disabled, though it doesn't specify any method for disabling this. Which further points to the conclusion that this isn't possible.

While this might not be an answer to your issue I believe it's worth mentioning that many browsers ignore attempt to manually manipulate the way the browser works or displays, for specific security reasons - often related to phishing.

For this reason the ability to manipulate the address bar was disabled on the desktop version and although I haven't found a source yet identifying this ability on mobile Chrome I believe the ability will likely be the same.

https://bugzilla.mozilla.org/show_bug.cgi?id=337344

Solution 4

Use this style code on your page.Now your chrome url bar will not hide.It'll stop scrolling.

<style type="text/css">
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>

You can also see here

View more solutions

19,757

a...

Updated on July 06, 2022

Comments

a... almost 2 years

I'm working on a web app. Most of the app has scrolling disabled, however one fullscreen panel needs to be scrollable.

The problem:

If the user is in the part of the app that's scrollable, and scrolls down, the address bar disappears. If, after the address bar disappears, the user decides to exit that panel by clicking an X on the fixed-position menu bar, then the address bar never gets triggered (because scrolling up never happens) and so the user is stuck in a scroll-disabled address-bar-less state.

My question:

Is it possible to force trigger the address bar to show in Google Chrome?

Links!

JSBin output

JSBin code

btw

Simply setting $(window).scrollTop(0) doesn't do it.

Emulating using dev tools doesn't work. You need to open it in a mobile device, in the chrome app.

Thanks!

Example below:

No scrolling allowed, address bar showing

)

Scrolling allowed, address bar showing

User scrolled, address bar hiding

Go back to scrolling-disabled div, address bar is hidden
a... almost 10 years

Thanks so much for the thoughtful comment! I actually tried using the Fullscreen API and it doesn't work for the chrome app. Seems like they just don't give you the option to turn off fullscreen outright. I was hoping for a hacky fix that triggers scrolling or something like it, so that the address bar reappears, but have not been successful at it, yet.
Kolors almost 10 years

That's been a common method for a while; though like I said they've been trying to get rid of tricks like that in browsers - plus relying on dirty hacks is never a great way of building a site. May I ask why you're trying to get the address bar to show?
a... almost 10 years

Of course I'd very much like to not rely on dirty tricks, however there doesn't seem to be a clean, supported way to do this. I'm trying to trigger the address bar because, as the example shows, if a user has scrolled in one panel and then decides to exit it mid-panel, the user becomes stuck in the "fullscreen" mode, unable to scroll up to see the address bar, unable to close the tab if he wants to or navigate to another one. Basically, the navigation is broken.
Kolors almost 10 years

Well one method could be to simulate the navigation bar? - Certainly not a great method but it might help with your issue if there is no clean alternative. A simple box, with some Javascript buttons etc...?
Marc Rochkind over 9 years

While the term "chrome app" appears here, this issue doesn't seem related to a Chrome App. If so, please remove the google-chrome-app tag.
Kolors over 9 years

Why are you commenting this on an answer? - I think the OP simply mistook 'google-chrome-app' for referring to Chrome itself, rather than an externally packaged app, in which case you're right but why not edit it yourself...in any case I put in a change request.
Luis Febro over 4 years

I was having an issue which freezes the button when scrolling the screen on mobile. The address bar also disappeared with that. Only if I scrolled to the top, things get back to work again. So, your solution solved this issue. I didn't have included height 100% in my main.css file. Thanks! The exception was just I didn't need the overflow.