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

Question

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

我试图通过在主 web 应用程序的顶部叠加一个滚动元素来实现这一点，工具栏及其内容位于底部。我给这个元素一个比主要内容低的 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 实现我想要的东西？

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-index 也能正常工作。