在Android浏览器中，仅使用HTML和CSS打开工具栏

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

我试图通过在主webapp的顶部覆盖一个滚动元素，工具栏及其内容位于底部来实现这一点。我给了这个元素一个比主要内容更低的

z-index

，这样它就不会阻止用户与主要内容交互，给工具栏及其内容一个更高的

z-index

，这样它就可以被看到并向上拉/滚动

这在桌面版和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>

我认为它在Android浏览器上不起作用，因为它决定忽略工具栏较高的

z-index

，因为它位于具有较低

z-index

的元素中

---

无论哪种方式，是否有人知道我可以如何更改此设置，使其能够在Android浏览器上工作，和/或是否有其他布局方案可用于仅通过HTML/CSS实现我的愿望？

我在Emulator中测试了您的示例，请尝试添加：

z-index: 2;

到您的#滚动条：

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

对我来说很好

为什么您需要在#主要内容上使用z索引？如果你可以跳过它，那么即使在滚动条上没有额外的z索引，它也能工作

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