2012-07-21 6 views
5

मेरे पास यह कोड है जो डेस्कटॉप ब्राउज़र पर काम करता है। मैं मोबाइल ब्राउज़र पर इस व्यवहार को कैसे प्राप्त कर सकता हूं? असल में मैं एक मेनू बनाना चाहता हूं जो पक्षों तक स्क्रॉल करेगा।मोबाइल ब्राउज़र पर काम करने के लिए मैं div scroll overflow-x कैसे प्राप्त कर सकता हूं?

<style type="text/css"> 
    #navBar { 
     height: 55px; 
     width: 80px; 
     overflow-x: scroll; 
     overflow-y:hidden; 
     white-space: nowrap; 
    } 

    #navBar div { 
     display: inline-block; 
    } 
    </style> 


    <div id="navBar"> 
      akdhbaIDBhbfbhwhfbaibf 
      <div style="width: 100px; text-align: center; background-color: red;"> 
       <img src="" alt="Nav1" /> 
       <br /> 
       <span style="font-size: 80%">Nav1</span> 
      </div> 
      <div style=" width: 100px; text-align: center;"> 
       <img src="" alt="Nav2" /> 
       <br /> 
       <span style="font-size: 80%">Nav2</span> 
      </div> 
      <div style=" width: 100px; text-align: center; background-color: red;"> 
       <img src="" alt="Nav3" /> 
       <br /> 
       <span style="font-size: 80%">Nav3</span> 
      </div> 
    </div> 
+0

फ्लॉप तुम सिर्फ पूछना http://stackoverflow.com/questions/11590036/force-inner-elements-to-overflow-x –

+0

हाँ, मैं mohamad से जवाब है, लेकिन मैं काम करने के लिए इस कोड को nedd मोबाइल ब्राउज़रों पर। क्या आपको पता है कि इस कोड को मोबाइल डिवाइस पर कैसे काम करना है? –

+0

क्या आप अपना कोड पूरी तरह से अपलोड कर सकते हैं? मैं मोबाइल के लिए काम करता हूं, यदि आप अधिक जानकारी प्रदान कर सकते हैं, और आप किस डिवाइस पर दिख रहे हैं तो यह आपकी मदद कर सकता है? –

उत्तर

3

आप देशी स्क्रॉलिंग को -webkit-overflow-scrolling के साथ सक्षम कर सकते हैं: स्पर्श;

<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <style> 
    div { 
     overflow-y: hidden; 
     overflow-x: scroll; 
     -webkit-overflow-scrolling: touch; 
     width: 150px; 
     border: 1px solid grey; 
    } 

    h1 { 
     width: 400px; 
    } 
    </style> 
    </head> 
    <body> 
    <div> 
     <h1>some content here</h1> 
    </div> 
    </body> 
</html> 
+1

उत्तर के लिए धन्यवाद, मैंने बस इस कोड को एचटीएमएल पेज में रखा है और इसे अपने आईपॉड से और मेरे एंड्रॉइड एचटीसी से फोन किया है और यह स्क्रॉल नहीं कर रहा है.क्या मुझे याद आ रही है? धन्यवाद। –

+0

मेरे पास आज इसका परीक्षण करने के लिए कोई एंड्रॉइड फोन नहीं है, लेकिन मैं नवीनतम आईओएस उपकरणों पर एक्सओ दिशा में एक्स को दिशा में स्क्रॉल कर सकता हूं। आईओएस/एंड्रॉइड के कौन से संस्करण आप उपयोग करते हैं? – gronke

+0

एंड्रॉइड: 2.33; आईएसओ: 2.2.1 –

संबंधित मुद्दे

 संबंधित मुद्दे