CODEWITHSUNDEEP
javascriptandroidcssgoogle-chromesafari
Max Effenberger
Max Effenberger

Reputation: 561

Prevent Address-Bar hiding in mobile Browsers

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

Upvotes: 56

Views: 64071

Answers (11)

Alireza
Alireza

Reputation: 643

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

Upvotes: 0

Curtis
Curtis

Reputation: 2535

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

Upvotes: 2

Beeblebrox
Beeblebrox

Reputation: 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.

Upvotes: 1

Alan M.
Alan M.

Reputation: 1369

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;

    ⋮
}

Upvotes: 1

Submachine23
Submachine23

Reputation: 794

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

Upvotes: 54

ktorbo
ktorbo

Reputation: 71

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.

Upvotes: 7

Gh Doo
Gh Doo

Reputation: 31

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.

Upvotes: 3

Nitesh S Chauhan
Nitesh S Chauhan

Reputation: 205

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>

Upvotes: 16

f.overflow
f.overflow

Reputation: 298

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.

Upvotes: -1

Matt Gaunt
Matt Gaunt

Reputation: 9821

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

Upvotes: 0

Niels van der Wal
Niels van der Wal

Reputation: 53

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.

Upvotes: -3

Related Questions