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