javascript - precomposed - web app manifest ios

Prevenga el rebote de desplazamiento para el elemento del cuerpo, pero manténgalo para elementos secundarios en iOS

Question

Esta pregunta ya tiene una respuesta aquí:

• Aplicación web para iPhone - Detener el desplazamiento del cuerpo 6 respuestas

He estado trabajando en una aplicación web móvil en los últimos tiempos. Estoy optimizando el móvil primero, enfocándome específicamente en iOS para el iPhone en este momento. No quiero el aspecto preciso de una aplicación nativa, pero creo que la sensación de ser nativo es de una importancia absoluta. Hice el marcado y el CSS para reflejar esta idea, dejándome con esto (anotado para comprender mejor el problema que tengo más adelante):

Todo esto funciona sin problemas, y también tiene la ventaja de tener una sensación nativa, con encabezado y pie de página estáticos, y una vista interna desplazable (gracias a -webkit-overflow-scrolling: touch ).

Como sabrá cualquiera que haya usado iOS durante más de 5 minutos, cuando se desplace hacia arriba o hacia abajo, obtendrá un buen impulso de desplazamiento. Además, cuando llegas al principio de una lista, obtienes un bonito efecto de "rebote":

Siento que esto ayuda a definir la sensación de iOS, y un detalle tan pequeño puede hacer mucho. Afortunadamente, cuando se encuentra debajo de la parte superior de una lista en un elemento desplazable en una aplicación web y se desplaza más allá de la parte superior, obtiene el mismo efecto. Este es el comportamiento deseado en acción:

Sin embargo, cuando se encuentra en la parte superior de la lista e intenta recrear el mismo comportamiento de rebote en la parte superior de la lista (à la Setting.app, visto arriba), obtenemos el siguiente comportamiento, que no se desea :

He visto algunas questions similar questions el desbordamiento de pila, pero todas optan por desactivar el rebote. Me pregunto si es posible seguir rebotando, pero siempre hágalo en body section section#main , no en el cromo de la aplicación web . No estoy usando jQuery, por lo que preferiría que las respuestas estén en JavaScript directo (puntos de bonificación para una solución CSS, sin embargo).

Aquí hay un repositorio de GitHub con todo el código (Sinatra, HAML y Sass; la rama actual es so ), o un JSFiddle con imágenes y enlaces rotos, pero muestra el problema en cuestión en un iPhone (es mejor agregarlo a la pantalla de inicio para probar) .

Answer 1

¿Qué tal este pseudocódigo?

document.body.addEventListener("ontouchstart", function(event) {
  if(document.getElementById("main").scrollTop > 0) return;
  event.preventDefault();
  event.stopPropagation();
}, false);

Answer 2

Aquí hay algunos recursos útiles que encontré sobre el tema:

• https://github.com/joelambert/ScrollFix
• http://apdevblog.com/optimizing-webkit-overflow-scrolling/
• http://www.hakoniemi.net/labs/nonbounce/
• http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
• iScroll

Answer 3

Me encontré con el mismo problema y se me ocurrió esta solución:

http://demo.josefkjaergaard.com//element_scroll/index.html

Básicamente, evito que el contenido de desplazamiento esté en su posición máxima. Esto evita que el desplazamiento de cuerpo se active.

Funciona pero crea un pequeño chasquido al final de la relajación. Con un poco más de trabajo, este comportamiento probablemente podría ocultarse al compensar el contenido en la dirección opuesta.

Answer 4

INFORMACIÓN VIEJA: He resuelto esto: http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html

NUEVA INFORMACIÓN: Este es ahora un complemento de jQuery que se puede encontrar aquí: http://www.hakoniemi.net/labs/nonbounce/ .

Hay varios problemas , como perder la capacidad de zoom cuando se aplica esto o su actualización dinámica no funciona con fluidez.

Pero ahora la forma más sencilla es definir: <div class="nonbounce">...</div> y luego $.nonbounce();