javascript - playsinline - ¿Cómo puedo controlar la posición de desplazamiento mientras me desplazo en Safari en iOS?

personalizar centro de control ios 10

Question

Actualmente uso $(window).bind(''scroll'', foo); para supervisar $ (ventana) .scrollTop () y hacer cosas para crear un efecto de paralaje.

En todos los navegadores de escritorio foo () se llama para cada píxel que el usuario recorre, y todo es agradable y elegante. En Safari en iOS, el evento de desplazamiento solo se dispara DESPUÉS de que el desplazamiento finaliza.

$(window).bind(''touchmove'', foo); para asegurarme de que se llama a la función durante el deslizamiento en iOS, y me llevó un poco más lejos. Cuando el usuario suelta el dedo, la página continúa desplazándose, pero el evento deja de disparar.

¿Algunas ideas?

Answer 1

Cuando vi su pregunta, estaba planeando hacer un polyfill para esto (¿si tal no existe?). Lamentablemente, tuve muy poco tiempo.

La idea es tener un setInterval , que se inicia ontouchstart , y comprueba si document.body.scrollTop ha cambiado desde la última vez, por ejemplo. por cada 20 milisegundos. Y si es así, entonces despachamos manualmente el evento de desplazamiento. De lo contrario, clearInterval ya que aparentemente no hay más desplazamiento.

Esto sería en resumen. Si tienes más tiempo (que yo), entonces no dudes en probar con esas pautas.

Editar: Ahora, leyendo más, parece que se sugiere la misma idea en la otra respuesta. ¿Estás seguro de que los intervalos se detienen al desplazarte por el iPad?

Answer 2

Esto podría ser un error con jQuery mismo: http://bugs.jquery.com/ticket/6446

Ese ticket ha estado abierto durante un tiempo y pertenece a iOS 4, pero tal vez debas investigar el cálculo de la posición de desplazamiento con javascript puro.

Answer 3

Como sé, no hay ejecución de javascript mientras se desplaza en la mayoría de los dispositivos móviles. Hay algunas soluciones (fe iscroll) por ahí. Iscroll está utilizando css-technique "transform". Pero no hay forma de ejecutar javascript mientras se desplaza. Supongo que el algoritmo de desplazamiento suave es demasiado caro.

Answer 4

Si bien esto no es posible de forma inmediata , por así decirlo, puede hacerlo utilizando iscroll

Por lo tanto, usaría iScroll para dispositivos / tabletas móviles iOS y Android, y usaría la forma en que lo hace actualmente para dispositivos de escritorio.

iScroll tiene varias opciones para invocar funciones de devolución de llamada en ciertos eventos, como ''onScrollMove'', ''onBeforeScrollEnd'', ''onTouchEnd'', etc. Desafortunadamente, no hay una opción para ejecutar una devolución de llamada en "TODOS los cambios de posición, incluidos los cambios". debido al impulso de desplazamiento después de que el usuario haya dejado de tocar la pantalla ". Pero, es bastante fácil agregar uno.

En la fuente de iScroll, alrededor de la línea 127, cerca del comentario "// Eventos", agregue una nueva variable:

onPosChange: null

Luego, alrededor de la línea 308, al final de la función "_pos", agregue esta línea:

if (this.options.onPosChange) this.options.onPosChange.call();

(eso solo llamará a la función pasada en la opción "onPosChange", si existe).

Una vez hecho esto, el siguiente código de ejemplo configurará iScroll para el div con id = "iscroll_container" e imprimirá el desplazamiento en Y a la consola cada vez que cambie:

var myScroll;
function loaded() {
    myScroll = new iScroll(''iscroll_container'', { onPosChange: actOnScroll });
}

document.addEventListener(''touchmove'', function (e) { e.preventDefault(); }, false);

//Use this for high compatibility (iDevice + Android)
document.addEventListener(''DOMContentLoaded'', function () { setTimeout(loaded, 200); }, false);

function actOnScroll(){
    console.log(''got a scroll move! Vert offset is: '' + myScroll.y);
}

Tenga en cuenta que Ben the Bodyguard Parallax Site funciona en iPad usando iScroll (usan una versión mucho más antigua de iscroll y no lo hacen exactamente como describí aquí).

Además, Life of Pi Parallax Site funciona muy bien en iPad: no puedo entender cómo lo hacen, ¡pero al menos demuestra que es posible!

Answer 5

La página web de Apple para iPhone 5c usa algunos efectos de desplazamiento de paralaje que parecen continuar con el dedo tocando la pantalla y desplazándose. Así que supongo que javascript no se puede desactivar por completo durante el desplazamiento. Tumult Hype también proporciona esta funcionalidad.

Answer 6

Recomiendo usar la biblioteca javascript "Skrollr". Es la mejor opción de animación de desplazamiento móvil que he encontrado hasta la fecha y es muy fácil de poner en marcha rápidamente. Cree animaciones y manipule CSS en función de una posición de desplazamiento de inicio y fin. Cree tantas posiciones de desplazamiento de datos y animaciones como necesite para la mayoría de las propiedades de CSS estándar.

En el siguiente ejemplo, el color de fondo se animaría en el transcurso de un desplazamiento de 500 píxeles:

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

Consulte el repositorio en Git: https://github.com/Prinzhorn/skrollr

Ejemplo de demostración de Skrollr: http://prinzhorn.github.io/skrollr/

Impresionante ejemplo del mundo real: http://www.fontwalk.de/03/