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

Ticktack

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

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. – Ticktack

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. – Verdha

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. – Ticktack

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

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 – Ticktack

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

Have you tried overscroll-behavior: contain? – Lahomalahore

Answer 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 */
}

Woodford

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 */ } – Homocentric

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 */ } } – Homocentric

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 – Homocentric

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 – Thevenot

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

@Shornick 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. – Laaspere

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. – Stoltzfus

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

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

not working with gsap scrolltrigger – Allegorical

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

Ecumenicism

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). – Ole

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

Answer 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.

Univalence

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; } – Chloral

Answer 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.

Gamone

Answer 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' />

Violetavioletta

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

Answer 6

So for it was the problem, that I want to avoid the scroll effect on a certain element. For this element I just set:

.disable-scroll {  
     overflow-y: hidden;  
     touch-action: pan-x; 
}

It works on Chrome and the Xiaomi Default Browser but not Firefox.

Skewbald

Answer 7

The most reliable solution may be to use the fullscreen API: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

Leandro

Answer 8

The following worked for me:

HTML

<body>
    <div> This is the container for all content. </div>
</body>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    ⋮
}

body > div {
    position: absolute;
    left: 0;
    top: 0;
    
    box-sizing: border-box;
    
    width: 100%;
    height: CALC(100% + 1px);
    
    overflow-x: hidden;
    overflow-y: auto;

    ⋮
}

Blackwell

Answer 9

Another approach with customized scrollbar:

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #bdbdbd;
}

html,
body {
    height: 100%;
    margin: 0;
}
html {
    overflow: hidden;
}
body {
    overflow-y: auto;
}

Exequatur

Answer 10

Use window.innerHeight to set boundaries for your site

You can set html and body or your wrapper to

var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);    

Keep in mind, that it needs to be updated on every resize!

window.innerHeight allows you to get the actual height of the inner part of the browser view (no browser bar). You can achieve the height of the content when the bar is visible, or even when it is hidden (swiped down).

In my case:
1. set body to 100vh via CSS.
Unfortunately vh ignores the browser bars, what causes some trouble on mobile devices with modern browsers that hide the bar while/after scrolling. Have a look at.

This is also my solution to problems like those above.

2. Calculate the exact height via JS with the stated function. Update on every resize!
=> the content of the site is now restricted to the inner part of the view.

On mobile:
Android 7.1.1/ Chrome 61.0 iOS 9.3.5/ Safari

=> now the browser bar is no longer hiding on scroll- and swipe-events.

Keep in mind:
It is only working, when you do not use some library that leads to believe you are scrolling horizontal, but actually is using body.height.

Rufous

Answer 11

With a javascript window.scrollTo(0, 1); you can fix the problem.

Look at http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ for the solution.

Expurgate

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

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