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

【问题标题】：Pull-up toolbar using only HTML and CSS in Android browser在 Android 浏览器中仅使用 HTML 和 CSS 的上拉工具栏
【发布时间】：2012-11-21 13:40:51
【问题描述】：

我的移动网络应用底部有一个工具栏。我希望能够上下拖动这个工具栏，显示它下面的内容。我希望能够简单地通过使用 HTML/CSS 来做到这一点，而不必使用触摸/滚动事件或移动触摸/滚动库。

我试图通过在主 webapp 顶部覆盖一个滚动元素来实现此目的，工具栏及其内容位于底部。我给这个元素一个比主要内容更低的z-index，这样它就不会阻止用户与主要内容交互，并且给工具栏及其内容一个更高的z-index，这样它就可以被看到和拉/向上滚动。

I have created a 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 来实现我想要的？

【问题讨论】：

标签： android html overflow z-index android-browser

【解决方案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-index 也可以工作。

【讨论】：