Prevent Address-Bar hiding in mobile Browsers

Question

I'm currently working on a website with a horizontal layout. All elements are position:absolute with javascript. Their size is calculated with window.innerHeight. My Problem is that despite the elements are no higher than the window's height, I can scroll down (height of the addressbar). This is annoying in two ways. First it triggers the window-resize event which I neither want nor need at that time. And Second it does not play well with some content boxes whose content should be scrollable vertically. Sometime I can scroll the boxes, but sometimes the whole page is scrolled first (as said before: height of the addressbar). Is there any solution which would allow me to prevent this address-bar auto-hiding mechanism on all devices.

Thank in advance!

This is not scrollable at all:http://maxeffenberger.de/test.html

This can be scrolled horizontally (makes sense to see hidden content) BUT also vertically until the addressbar is hidden (makes no sense, as there is no additional "vertical" content that would need more space: http://maxeffenberger.de/test2.html

Solution 1

This is the way I have achieved it:

html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}

Solution 2

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>

Solution 3

The only soltuion that worked for me was this :

Put the content of your body inside a wrapper with the following style :

.wrapper {
    position: absolute;
    top: 0.5px;
    left: 0;
    right: 0;
    bottom: 0.5px;
    overflow-x: hidden; /* or any other value */
    overflow-y: auto; /* or any other value */
}

the half-pixel offsets will be invisible but they will prevent the body from being considered as scrollable by the browser, thus preventing the address bar from hiding.

Solution 4

if someone still has this problem with the hiding address bar, this is how its worked for me.

 html, body {
    height: 100%;
 }

 body {
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
        -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
 }

 .background {
    position: fixed;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
 }

I try a lot of similar code, but android chrome was killing me. Only this worked for me. When you have navigation at the bottom of the page it's major problem with that auto-hide bar.

Solution 5

This does it for me in iOS 15. Though my web app disables zooming. Both the top bar and bottom bar are always full size.

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi, minimal-ui' />

View more solutions

Comments

[Halcyon]

I can scroll down .. it triggers the window-resize event -- That sounds very strange. Can you clarify please?

[Max Effenberger]

Not really scroll. I can move the page until the addressbar is hidden. That triggers the window.resize event as their is more vertical space after the address bar is hidden.

[Halcyon]

I see .. why is that a problem? I'm assuming you either have an interface that is fullscreen ie. there is no scrollbar, or you have a scrollable interface. In either case there is a clear way on how to deal with the events.

[Max Effenberger]

the page should be only horizontally scrollable. There is nothing to scroll vertically (besides inside the content boxes). So i dont want the address bar hiding behavior - that makes no sense there.

[Halcyon]

I'm still very confused. Can you disable the vertical scroll? {overflow-y: hidden;} (css)

[Max Effenberger]

Nope. overflow-y:hidden; has no effect. Maybe this is only Android/Chrome related. Anyway i can scroll vertically the height of the address bar

[Mutex]

this thing is so annoying as it messes up all the scroll snapping on mobile devices.

[Max Effenberger]

actually it does not help. i dont want to hide the addressbar either. i just want to prevent it from hiding ;-)

[Eggs]

Perfect, Just tested on android mobile 5.0.1 chrome version 57. The css attributes that are key are: html { overflow: hidden } and body { height:100%; position:fixed; /* prevent overscroll bounce*/ overflow-y:scroll; -webkit-overflow-scrolling: touch; /* iOS velocity scrolling */ }

[Eggs]

One thing I would recommend is wrapping this in a media query as such: @media (max-width: 767px) { html { overflow: hidden; } body { height:100%; position:fixed; /* prevent overscroll bounce*/ overflow-y:scroll; -webkit-overflow-scrolling: touch; /* iOS velocity scrolling */ } }

[Eggs]

Actually, while this technique works fine on single fixed background images, it has a side-effect on the multiple fixed background images as can be seen when viewing this codepn on desktop vs. mobile device. codepen.io/KerryRuddock/pen/zZbvoR

[Harry Cutts]

This no longer seems to hide the address bar on either Android Chrome 58.0 or iOS 10.3 Safari.

[Admin]

That's really bad solution. I know it works, but should not be used. Ex. try scrolling down and then refreshing the page. You go to the top, while normally you would stay at the same position

[Alexis_A]

Why is it using 'width:50%' on the body?

[knee-cola]

@Alexis_A It's to create a centered column which is 50% wide. The second part of the equation is margin-left:25%. This however is unimportant - both (margin and width) can be safely removed and it will still work OK.

[Himanshu Gupta]

some time it's working properly but some time not, Height is calculated wrong. There is little bit space in the bottom until addressbar shown. Then I tried window.innerHeight which showing me 2 different height on my device. Some time it include addressbar height some time not. Totally fedup how to calculate proper height.

[Eric Mutta]

This worked for me, and it has to be EXACTLY as written above (if you remove the html tag for example it doesn't work; if you remove the overflow property the URL bar doesn't scroll but the annoying pull-to-refresh behaviour still remains...using overflow: hidden not only locks the URL bar in place but also prevents the pull-to-refresh behaviour). This style is great for "full-page/screen" UIs which fill the height of the screen (for height you MUST use 100% as above, using 100vh won't work).

[Yuri Gor]

This half-pixel solution works for me in combination with fixed position, here is my wrapper .main { position: fixed; top: 0.5px; right: 0; bottom: 0.5px; left: 0; }

[Johnny Kontrolletti]

This is a bad practice, you'll loose any benefit of window scrolling such as accessibility.

[Curtis]

This doesn't work for me in iOS 15, the bottom bar still shrinks when I swipe

[Curtis]

This doesn't work for me in iOS 15, the bottom bar still shrinks when I swipe.

[Mutex]

not working with gsap scrolltrigger

[Mutex]

man this works best with scrolltrigger (even though it hides the address bar).