How to restrict scrolling of a mobile site but allow access to potentially retracted address bar

Question

I have a repo up and running if you're interested in contributing to solutions.

I've run into an interesting problem while constructing a mobile site.

I am setting 'overflow: hidden;' to html/body when a drawer is toggled. This is so the window can't be scrolled, and the drawer - which is scrollable - on reaching it's limits doesn't scroll the page (e.preventDefault(); & e.stopPropagation(); simply don't do the trick).

This all works great. Fantastic if this was a Phonegap app. However - as this is a website, the inconsistent overflow setting creates a usability issue with the browser's 'fullscreen mode'. 'Fullscreen mode' is when the address bar is hidden upon scrolling down the page. When scrolling up the bar will reappear. When toggling the drawer the browser is essentially locked in either 'non fullscreen mode' or 'fullscreen mode'. The latter is the real issue - as users are simply unable to access the address bar - and gives the impression the browser has locked up or something weird.

Any bright ideas as to how (probably with Javascript) a scroll/touchmove could still give the effect of entering/exiting 'fullscreen mode'? I've had a play with the fullscreen API, but that's proper fullscreen, not just the address bar.

here are some screenshots:

1. site loads, we can see the address bar

2. site is scrollable as expected, browser enters 'fullscreen mode'

3. we toggle the drawer to open - the site is now unresponsive (besides the drawer scrolling and any gestures [via AngularJS directives] I've got to hide the drawer)

4. the drawer toggled when the address bar is visible. Good for usability, but the expected 'fullscreen mode' when using a site doesn't occur (would be nice to have the real estate).

EDIT2: https://medium.com seems to achieve what I'm after.

EDIT3: Some success with a invisible absolute positioned div sitting on top of everything - but that has it's own issues.

Answer 1

Rather than setting overflow: hidden; on body when the drawer is out, how about making the drawer position: fixed; overflow-y: auto;, that way the user can make the choice to scroll the body to get to the address bar or the drawer.

Just out of interest, what does Firefox for Android do in this situation? It might be worth filing a bug with the Chromium team if Firefox doesn't display similar usability problems.

EDIT: I've taken a look at the code at https://github.com/patrickmarabeas/marabeas.io when running in Android Chrome and Android Firefox via their respective ADB-enabled remote debuggers (really good tools!).

I've come to the conclusion that there isn't a nice way to get the address bar to show once it's hidden when body has overflow: hidden on it.
There is however after a hacky way!

Shift the main scrollable area from body to a div, in this case, #content. Then, position: absolute; body and make it fill the viewport plus some extra height when on mobile. Given below is the relevant CSS applied on the mobile browsers:

body {
    position: absolute;
    top: 0;
    bottom: -100px;
    left: 0;
    right: 0;
}

#content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

Then, as the browser is looking for body to be doing the scrolling as to whether or not to display the address bar, get the #content scroll to be linked with the main body scroll, though this may not be having an effect!:

var lastScrollTop = 0;
document.getElementById('content').addEventListener('scroll', function(e) {
    var currentScrollTop = document.getElementById('content').scrollTop;
    if(currentScrollTop < lastScrollTop) {
        // Upwards scroll!
        document.body.scrollTop -= 10;
    } else {
        // Downwards scroll!
        document.body.scrollTop += 10;
    }
    lastScrollTop = currentScrollTop;
 });

I'm sending you a pull request now: https://github.com/patrickmarabeas/marabeas.io/pull/5