6

我的移动网络应用程序底部有一个工具栏。我希望能够上下拖动这个工具栏，显示它下面的内容。我希望能够简单地通过使用 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 浏览器上不起作用，因为它决定忽略工具栏的 Higher z-index，因为它位于具有 lower 的元素中z-index。

无论哪种方式，有谁知道我可以如何更改它以便它可以在 Android 浏览器上运行，和/或是否有其他布局方案可以用来仅通过 HTML/CSS 来实现我想要的？

4

1 回答 1

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 也可以工作。

于 2012-12-11T10:40:30.810 回答