11

I am building a website that uses 100vh for each section. However on mobile browsers, this leads to a bad UI as the viewport height increases/decreases with hiding/displaying of the address bar (such as on Chrome). Is there any way to prevent the autohide of addressbar on scroll?

The Freelancer website has an implementation that fixes this. Could someone explain how this is done? https://m.freelancer.com

Sanjay George
  • 133
  • 1
  • 2
  • 9
  • I think that this answer solves it: https://stackoverflow.com/a/33953987/2464167 The site that you linked too uses a fixed size element to prevent address bar from hiding. – argaz Aug 23 '17 at 12:28

1 Answers1

2

Is there any way to prevent the autohide of addressbar on scroll?

Unfortunately, there is no way to pin the address bar from HTML or code (that I know of, at least).

"Fake" fullscreen mode:

Instead, you could consider forcing the address-bar to auto-hide when the page loads, to give a nicer full-screen experience.

Obviously, this will only apply when first loading the page and scrolling down - back up again, it will show the address bar.

I tend to find that most mobile-designed sites require the user to scroll down a lot, and then navigate to another page anyway.

Here's how:

Write a simple script and use it in the page(s) you wish to have as "full-screen" - or if you have a template page which the rest of your site uses, use the script in that.

You can use:

<script type="text/javascript">
    window.onLoad = function() {        
        window.scrollTo(0,1);
    }
</script>

Or if you're using jQuery:

<script type="text/javascript">
    $(function() {
        $(window).scrollTo(0,1);
    }
</script>

This "tricks" the browser into thinking that you've already scrolled when the page loads, and therefore auto-hides the address bar. This may/may not work on certain browsers.

Again - this is not a direct answer to "preventing autohide of addressbar on scroll", but this may enhance your users' experience when first visiting pages.

I used: http://www.html5rocks.com/en/mobile/fullscreen/ as a reference - by the looks of it, there are plenty more other ideas, too.

Hope this helps! :)

UPDATE:

I've done a lot more digging on this subject, and there also appears to be other ways that you can force the browser into being "full-screen", and also to prevent the address bar from re-appearing when scrolling "up".

See here: http://www.creativebloq.com/html5/12-html5-tricks-mobile-81412803 for some (plenty of) suggestions.

Geoff James
  • 3,122
  • 1
  • 17
  • 36
  • 9
    Why was this accepted as an answer? It answers the opposite of what is asked. The question is how to avoid hiding (so keep the address bar in view), and not how to get fullscreen/ a hiding address bar. – musicformellons Apr 10 '17 at 20:15
  • Thanks for your comment @musicformellons :) I put in the first line of the answer there's no way that I know of to achieve what the OP wanted directly. Instead, I suggested an alternative approach they could try. Not sure why it was marked as accepted​ - possibly what the OP used in the end. I would be interested to have a read if there is a way to do this, as I spent a bit of time looking into it, but to no avail. – Geoff James Apr 10 '17 at 20:38
  • Just had a thought - not at PC, though, so can't test. If you were to turn overflow off on the `body` but make it 100vh height and 100vw width; and instead place a `div` inside it that has overflow-y set to auto - I wonder if this would work? – Geoff James Apr 10 '17 at 20:46
  • Thanks for your reactions. Do you mean 'overflow: hidden' by turning it off? – musicformellons Apr 11 '17 at 11:31
  • That's right, yes. Sorry - was late at night and I was on phone so unable to test a proof of concept – Geoff James Apr 11 '17 at 11:32