Tôi có một thanh công cụ ở cuối ứng dụng web di động của mình. Tôi muốn có thể kéo thanh công cụ này lên và xuống, tiết lộ nội dung bên dưới nó. Tôi muốn có thể thực hiện điều này đơn giản bằng cách sử dụng HTML/CSS và không phải sử dụng các sự kiện chạm/cuộn hoặc thư viện di động/chạm di động.Thanh công cụ kéo lên chỉ sử dụng HTML và CSS trong trình duyệt Android
Tôi đang cố gắng thực hiện việc này bằng cách phủ một phần tử cuộn lên trên ứng dụng web chính với thanh công cụ và nội dung của nó ở dưới cùng. Tôi đã cung cấp phần tử này thấp hơn z-index so với nội dung chính để nó không chặn người dùng tương tác với nội dung chính và cho thanh công cụ và nội dung của nó cao hơn z-index sao cho nó có thể được nhìn thấy và kéo/cuộn lên .
I have created a jsFiddle có hành vi chính xác trong cả phiên bản Chrome dành cho máy tính để bàn và Android. Tôi có thể kéo lên thanh công cụ với ngón tay của tôi hoặc bằng cách di chuyển con trỏ của tôi trên đầu trang của nó:
Thật không may, thanh công cụ không xuất hiện trong trình duyệt Android (thử nghiệm trên 4.1 và 4.2).
Tuy nhiên khi tôi nhấn nơi toolbar sẽ và kéo lên, nó không cuộn trang cho đến khi tôi đã chuyển ngón tay của tôi đủ xa để có cuộn thanh công cụ tất cả các con đường lên, nếu nó là có thể nhìn thấy. Đây là cách cuộn thanh công cụ hoạt động trong Chrome và cho biết thanh công cụ đang cuộn đúng cách trong trình duyệt Android. Nó chỉ là không nhìn thấy được.
<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;
}
tôi con số đó không hoạt động trên trình duyệt Android vì nó được quyết định bỏ qua của thanh công cụ cao z-index, vì nó trong một phần tử với một z-index thấp hơn. Một trong hai cách, có ai biết làm thế nào tôi có thể thay đổi điều này để nó hoạt động trên trình duyệt Android, và/hoặc có các sơ đồ bố cục khác mà tôi có thể sử dụng để đạt được những gì tôi mong muốn thông qua HTML/CSS không? Không.