在Android浏览器中仅使用HTML和CSS的上拉工具栏

Question

我的移动网络应用程序底部有一个工具栏.我希望能够上下拖动此工具栏,显示其下方的内容.我希望能够通过使用HTML/CSS简单地完成此操作,而不必使用触摸/滚动事件或移动触摸/滚动库.

我试图通过将主要webapp顶部的滚动元素与工具栏及其底部的内容重叠来实现此目的.我给这个元素一个z-index比主要内容更低的元素,这样它就不会阻止用户与主要内容进行交互,并且工具栏及其内容更高,z-index以便可以看到和拉出/向上滚动.

我创建了一个jsFiddle,它在桌面版和Android版Chrome中都有正确的行为.我可以用手指向上拖动工具栏,或者用光标在其上滚动:

不幸的是,工具栏没有出现在Android浏览器中(在4.1和4.2上测试过).

但是,当我按下工具栏应该向上并向上拖动时,它不会滚动页面,直到我将手指移动到足以将工具栏一直向上滚动(如果它可见).这是滚动工具栏在Chrome中的工作方式,并指示工具栏在Android浏览器中正确滚动.它只是不可见.

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

我认为它在Android浏览器上不起作用,因为它决定忽略工具栏的更高z-index,因为它在一个较低的元素中z-index.

无论哪种方式,有没有人知道我怎么能够改变它,以便它可以在Android浏览器上工作,和/或是否有其他布局方案,我可以用来实现我想通过只有HTML/CSS？

Answer 1

我在模拟器中测试了您的示例，尝试添加：

z-index: 2;

到你的#scroller：

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

对我来说效果很好

为什么#main-content 上需要 z-index？如果你可以跳过它，那么即使 #scroller 上没有额外的 z 索引，它也能工作。