Para los que alguna vez se han puesto a hacer una web o webapp para iPhone o iPad, se habrán percatado que el webview de Safari tiene algunas carencias importantes a tener en cuenta en la maquetación. De entre ellas para mi las más molestas son dos:
- · el bouncing vertical de la página: ese que sucede cuando arrastramos la vista cuando ya está en el límite y se ve el fondo del navegador. Y que además queda muy feo.
- · los divs con overflow que no tienen scroll. O al menos no por defecto como si sucede en escritorio.
Para prevenir el tema del bouncing o rebote la solución utilizada hasta ahora es sencilla. Simplemente consiste en parar la propagación del movimiento añadiendo esta simple linea en nuestra página:
document.addEventListener("touchmove",function(e){e.preventDefault()},false);
Para el tema de scrollear divs he utilizado multitud de opciones, de las que al final escogía principalmente dos:
- de entre las mejores: iScroll, un pequeño javascript que se encarga de proporcionar scroll a aquellos divs con overflow.
- la otra, utilizar la propiedad css nativa -webkit-overflow-scrolling:touch;
El primero no está mal, funciona en casi todos los casos. Pero ha veces se hace un lío con la altura de los divs cuando ocultamos o mostramos capas. La otra pega es que no es nativo, sino un scroll simulado.
Por contra, aplicando el css -webkit-overflow-scrolling:touch al div este escrollea de forma nativa como lo haría cualquier vista de una aplicación, funcionando correctamente y de forma fluida. El problema de este, es que no funciona si aplicamos el script para prevenir el bouncing de la webapp.
Para solventar ambos problemas he desarrollado mi propio script: divscroll.js.
divScroll.js se encarga de hacer compatible el preventDefault para evitar con bouncing con el -webkit-overflow-scrolling. Aquí podéis ver una demo especialmente pensada para ipad:
Para utilizarlo solo hemos de incluir el script en nuestra web o webapp y asignar la clase «divscrollable» a aquellos divs que queramos que tengan scroll, y nada más. Y con esto matamos dos pájaros de un tiro.
2 Comments
-
-
Hola otto,
DivScroll.js está diseñado especialmente para webkit de iOS (iPhone y iPad) aunque también funciona en android (se pueden scrollear los divs), con la salvedad que no aparecen las barras de scroll (sí lo hace en Chrome para android). Si lo que necesitas es que aparezcan las barras… lo siento, pero este no es tu script ;p
Lo que comentas de no poder arrastrar la página, DivScroll.js está diseñado para deshabilitar esta característica y hacerla compatible con el scroll de divs. Esto es así para que el marco principal de la webapp esté fijo y de apariencia de app nativa. Si tienes un contenido mayor que la pantalla, este deberá estar dentro de un div, que es de lo que se hará scroll. Como referencia te aconsejo que mires el ejemplo adjunto al script.
Si lo que necesitas es poder scrollear tu web y tener divs también scrolleables, con simplemente utilizar la propiedad css «-webkit-overflow-scrolling:touch» tendrás el tema solucionado.
Si necesitas algo más sofisticado, te recomiendo que le eches un ojo a los siguientes scripts para poder hacer scroll de divs:
YUI ScrollView: http://yuilibrary.com/yui/docs/scrollview/
Scrollability: http://joehewitt.github.io/scrollability/
jScrollPane: http://jscrollpane.kelvinluck.com/
iScroll: http://cubiq.org/iscroll
-
Hola,
Cómo se puede hacer este script compatible para Android?
Me explico: tengo una web con un scroll con botones y javascript. Mediante css’s escondo los botones de scroll en smartphones, y uso tu código para el scroll. Y en navegadores de sobremesa muestro los botones y uso un js específico para estos botones.
La web es http://pilatescontrologyclub.com/index2.html
Mi versión de Android es la 2.1.
Otro tema es quel al tener el script activo, no me permite (iPhone 4) moverme por la página arrastrando la pantalla. Es normal?
Gracias!
OTTO