Pull-up toolbar using only HTML and CSS in Android browser

Question

I have a toolbar at the bottom of my mobile webapp. I'd like to be able to drag this toolbar up and down, revealing content underneath it. I'd like to be able to do this simply by using HTML/CSS, and not having to use touch/scroll events or mobile touch/scroll libraries.

I am trying to do this by overlaying a scrolling element on top of the main webapp with the toolbar and its content at the bottom. I've given this element a lower z-index than the main content so that it doesn't block the user from interacting with the main content, and given the toolbar and its content a higher z-index so that it can be seen and pulled/scrolled up.

I have created a jsFiddle that has the correct behaviour in both desktop and Android versions of Chrome. I can drag up the toolbar with my finger or by scrolling with my cursor on top of it:

Unfortunately, the toolbar does not appear in the Android browser (tested on 4.1 and 4.2).

However when I press where the toolbar should be and drag up, it doesn't scroll the page until I have moved my finger far enough to have scrolled the toolbar all the way up, if it were visible. This is how scrolling the toolbar works in Chrome, and indicates that the toolbar is scrolling properly in the Android browser. It just isn't visible.

<div id="main-content"></div>
<div id="scroller">
    <div id="wrapper">
        <div id="toolbar-and-content">
            <div id="toolbar">Toolbar</div>
            <div id="toolbar-content">Toolbar content</div>
        </div>
    </div>
</div>

#main-content {
    position:relative;
    width:100%;
    height:300px;
    background-color:green;
    z-index:1;
}
#scroller {
    position:absolute;
    top:0;
    width:100%;
    height:300px;
    overflow:auto;
}
#wrapper {
    position:relative;
    width:100%;
    height:500px;
}
#toolbar-and-content {
    position:absolute;
    bottom:0;
    width:100%;
    height:250px;
    z-index:2;
}
#toolbar {
    width:100%;
    height:49px;
    border-bottom:1px solid black;
    background-color:red;
}
#toolbar-content {
    width:100%;
    height:200px;
    background-color:orange;
}

I figure it doesn't work on the Android browser because it is deciding to ignore the toolbar's higher z-index, since it's in an element with a lower z-index.

Either way, does anyone know how I might be able to change this so that it would work on the Android browser, and/or are there other layout schemes I can use to achieve what I desire through only HTML/CSS?

Answer 1

I tested your example in Emulator, try add:

z-index: 2;

to your #scroller:

#scroller {
    position:absolute;
    top:0;
    width:100%;
    height:300px;
    overflow:auto;
    z-index: 2; // NEW
}

Worked fine for me

Why do you need z-index on #main-content? If you could just skip it than it would work even without additional z-index on #scroller.