¿Cómo puedo hacer que div scroll overflow-x funcione en un navegador móvil?

Tengo este código que funciona en los navegadores de escritorio. ¿Cómo puedo lograr este comportamiento en los navegadores móviles? Básicamente quiero crear un menú que se desplazará a los lados.¿Cómo puedo hacer que div scroll overflow-x funcione en un navegador móvil?

<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>

Fuente

2012-07-21 the_farmer

Didnt le preguntas http://stackoverflow.com/questions/11590036/force-inner-elements-to-overflow-x –

sí, tengo la respuesta de Mohamad, pero nedd este código para trabajar en navegadores móviles. ¿Tiene idea de cómo hacer que este código funcione en un dispositivo móvil? –

¿Puedes subir tu código por completo? trabajo para móviles, puedo ayudarte si puedes proporcionar más detalles, y en qué dispositivos te ves que esto sucede? –

Puede habilitar el desplazamiento nativo con -webkit-overflow-scrolling: touch;

<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>

Fuente

2012-07-22 01:36:25 gronke

gracias por la respuesta, acabo de poner este código en la página html y lo llamo desde mi ipod y desde mi htc android y no se desplaza.¿Qué me falta? Gracias. –

No tengo un teléfono Android para probarlo hoy, pero puedo desplazar el div en dirección x en mis dispositivos iOS con el último firmware. ¿Qué versiones de iOS/Android usas? – gronke

android: 2,33; ISO: 2.2.1 –

¿Cómo puedo hacer que div scroll overflow-x funcione en un navegador móvil?

Respuesta

Cuestiones relacionadas