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

_I can scroll down .. it triggers the window-resize event_ -- That sounds very strange. Can you clarify please? — Halcyon, Aug 05 '13 at 14:57
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. — Max Effenberger, Aug 05 '13 at 15:02
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. — Halcyon, Aug 05 '13 at 15:04
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. — Max Effenberger, Aug 05 '13 at 15:08
I'm still very confused. Can you disable the vertical scroll? `{overflow-y: hidden;}` (css) — Halcyon, Aug 05 '13 at 15:11
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 — Max Effenberger, Aug 05 '13 at 15:53
this thing is so annoying as it messes up all the scroll snapping on mobile devices. — nTheta, Jun 26 '21 at 05:27

score 53 · Answer 1 · edited Mar 15 '21 at 08:51

53

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

edited Mar 15 '21 at 08:51

Jay

19,649
38
121
184

answered Nov 27 '15 at 09:18

Submachine23

774
6
11

1

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 Apr 09 '17 at 20:37
3

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 Apr 09 '17 at 20:54
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. http://codepen.io/KerryRuddock/pen/zZbvoR – Eggs Apr 09 '17 at 21:02
1

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 – Sep 20 '17 at 14:22
1

Why is it using 'width:50%' on the body? – Alexis_A Apr 02 '18 at 22:26
@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. – knee-cola Jun 07 '18 at 08:47
1

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. – Himanshu Gupta Jul 08 '18 at 15:50
This is a bad practice, you'll loose any benefit of `window` scrolling such as accessibility. – Johnny Kontrolletti Jan 18 '22 at 10:25
This doesn't work for me in iOS 15, the bottom bar still shrinks when I swipe. – Curtis Mar 04 '22 at 02:01
not working with gsap scrolltrigger – nTheta Apr 26 '22 at 17:37

score 16 · Answer 2 · answered Jul 18 '18 at 06:34

16

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>

answered Jul 18 '18 at 06:34

Nitesh S Chauhan

207
2
8

1

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). – Eric Mutta Mar 28 '20 at 20:47
This doesn't work for me in iOS 15, the bottom bar still shrinks when I swipe – Curtis Mar 04 '22 at 02:01

score 5 · Answer 3 · answered May 08 '20 at 16:26

5

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.

answered May 08 '20 at 16:26

ktorbo

51
1
1

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; }` – Yuri Gor Apr 03 '21 at 20:45

score 3 · Answer 4 · answered Feb 06 '19 at 21:05

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.

score 2 · Answer 5 · answered Mar 04 '22 at 02:05

2

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

answered Mar 04 '22 at 02:05

Curtis

2,486
5
40
44

man this works best with scrolltrigger (even though it hides the address bar). – nTheta Apr 26 '22 at 17:40

score 1 · Answer 6 · answered Dec 11 '21 at 22:36

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.

score 0 · Answer 7 · answered Aug 08 '13 at 09:46

0

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

answered Aug 08 '13 at 09:46

Matt Gaunt

9,434
3
36
57

score 0 · Answer 8 · answered Jun 28 '21 at 19:47

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;

    ⋮
}

score 0 · Answer 9 · answered Aug 13 '22 at 12:18

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

score -1 · Answer 10 · answered Jan 31 '18 at 12:48

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.

score -3 · Answer 11 · answered Aug 05 '13 at 15:18

-3

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.

answered Aug 05 '13 at 15:18

Niels van der Wal

53
1

4

actually it does not help. i dont want to hide the addressbar either. i just want to prevent it from hiding ;-) – Max Effenberger Aug 05 '13 at 15:47
This no longer seems to hide the address bar on either Android Chrome 58.0 or iOS 10.3 Safari. – Harry Cutts Jun 01 '17 at 01:27

Prevent Address-Bar hiding in mobile Browsers

11 Answers11

Linked