Hacer un divisable anidado para un sitio móvil

StackOverflow https://stackoverflow.com/questions/8840200

Pregunta

¿Es posible crear un div desplazable en un sitio móvil jQuery? Básicamente, quiero que un encabezado y un pie de página fijo, pero la sección central sea desplazable. Intenté configurar el desbordamiento: desplazarse (y configuré el ancho y la altura del DIV) pero no parece funcionar correctamente en mi simulador iOS. (Haría un jsfiddle pero no funciona para las cosas móvil jQuery)

Aquí está el HTML:

<body> 
<div data-role="page">
   <div data-role="header">
   <div id="header_image">
      <img src="images/top_logo.png" />
   </div>
   </div><!-- /header -->
       <div id="content_bg">
       <div data-role="content">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div><!-- /content -->
   </div><!-- /content_bg -->
   <div data-role="footer" data-theme="b">
   <div id="footer_text">
      <center><h4>Page Footer</h4></center>
   </div><!-- /footer_text -->
   </div><!-- /footer -->
   </div><!-- /page -->

Aquí está el CSS relevante:

#content_bg{
    background-color:#0038a5;
    height:310px;
    width:100%;
    text-size:11px;
    color:white;
    overflow: scroll;
    }

¡Gracias por cualquier luz que puedas brillar en este problema!

¿Fue útil?

Solución

Hay muchas soluciones que incluyen: Iscroll, FlexScroll, JQuery ScrollView Experiment y otras (estas que he usado con éxito).

Encontré FlexScroll de la más fácil de configurar y se trata del mismo peso del código.

Iscroll 4 -> http://cubiq.org/iscroll-4 (Asegúrese de investigar el lite Versión, ya que tiene un peso de código más pequeño y todavía hace las funciones básicas)

FlexScroll -> http://www.hesido.com/web.php?page=customscrollbar (Me gusta este, su propósito original es crear barras de desplazamiento personalizadas, pero admite eventos táctiles para áreas desplazables en dispositivos móviles)

JQuery Mobile ScrollView -> http://jquerymobile.com/test/experiments/scrollview/ (Creado por el equipo móvil jQuery)

ACTUALIZAR

He respondido una serie de preguntas relacionadas con Iscroll en StackOverflow, aquí hay un enlace para verlas (en caso de que te encuentres con problemas con Iscroll): https://stackoverflow.com/search?q=user%3A752738+%5BJQuery-Mobile%5D+Iscroll&submit=Search

Otros consejos

Iscroll es su solución. Consulte su sitio web

http://cubiq.org/iscroll-4

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top