Android ब्राउज़र में केवल HTML और CSS का उपयोग करके पुल-अप टूलबार

Question

मेरे पास मेरे मोबाइल वेबपैप के नीचे एक टूलबार है। मैं इस टूलबार को ऊपर और नीचे खींचने में सक्षम होना चाहता हूं, इसके नीचे सामग्री प्रकट करना। मैं बस HTML/CSS का उपयोग करके ऐसा करने में सक्षम होना चाहता हूं, और स्पर्श/स्क्रॉल ईवेंट या मोबाइल स्पर्श/स्क्रॉल लाइब्रेरी का उपयोग नहीं करना चाहता हूं।

मैं मुख्य वेबपैप के शीर्ष पर स्क्रॉलिंग तत्व को टूलबार और नीचे की सामग्री के साथ ओवरले करके ऐसा करने का प्रयास कर रहा हूं। मैंने इस तत्व को मुख्य सामग्री की तुलना में कम z-index दिया है ताकि यह उपयोगकर्ता को मुख्य सामग्री के साथ बातचीत करने से रोक न सके, और टूलबार और इसकी सामग्री को z-index दिया गया ताकि इसे देखा और खींचा जा सके/स्क्रॉल किया जा सके ।

I have created a jsFiddle जिसमें क्रोम के डेस्कटॉप और एंड्रॉइड संस्करण दोनों में सही व्यवहार है। मैं अपनी उंगली से या यह की चोटी पर मेरी कर्सर के साथ स्क्रॉल करके उपकरण पट्टी ऊपर खींचें कर सकते हैं:

दुर्भाग्य से, उपकरण पट्टी Android ब्राउज़र (पर 4.1 और 4.2 का परीक्षण) में प्रकट नहीं होता।

हालांकि मैं जब प्रेस जहां उपकरण पट्टी हो सकता है और ऊपर खींचें, यह पेज स्क्रॉल नहीं होता जब तक मैं काफी दूर तक मेरी उंगली स्थानांतरित कर दिया उपकरण पट्टी नीचे से ऊपर तक स्क्रॉल किया है करने के लिए करना चाहिए, अगर यह थे दिखाई। इस प्रकार टूलबार को स्क्रॉल करना क्रोम में काम करता है, और यह इंगित करता है कि टूलबार एंड्रॉइड ब्राउज़र में ठीक से स्क्रॉल कर रहा है। यह सिर्फ दिखाई नहीं दे रहा है।

<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 साथ एक तत्व में है।

किसी भी तरह से, क्या कोई जानता है कि मैं इसे कैसे बदल सकता हूं ताकि यह एंड्रॉइड ब्राउज़र पर काम करे, और/या क्या अन्य लेआउट योजनाएं हैं जिन्हें मैं केवल HTML/CSS के माध्यम से प्राप्त करने के लिए उपयोग कर सकता हूं?

Answer 1

मैं एम्यूलेटर में अपने उदाहरण परीक्षण किया है, को जोड़ने का प्रयास करें:

z-index: 2; 

अपने #scroller रहे हैं:

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

के लिए मुझे

तुम क्यों # पर z- सूचकांक की क्या ज़रूरत है ठीक काम किया मुख्य सामग्री? यदि आप इसे छोड़ सकते हैं तो यह #scroller पर अतिरिक्त जेड-इंडेक्स के बिना भी काम करेगा।