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 someth…

Accepted Answer

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

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

Solution

Problem