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

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

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

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

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

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

 
Toolbar
Toolbar content
 #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?

我在模拟器中测试了你的例子,尝试添加:

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