Posición de desplazamiento actual al usar -webkit-overflow-scrolling: táctil - Safari iOS evento de javascript (scrollTop/scrollLeft)

Funciona de forma brillante, excepto que no parece actualizar element.scrollTop o element.scrollLeft mientras se desplaza. Solo actualiza element.scrollTop/desencadena un evento de desplazamiento cuando el impulso se agota y se detiene.

¿Alguien sabe de una manera de averiguar su posición de desplazamiento actual y si hay un evento que puedo escuchar? Me preguntaba si se puede encontrar a través de una propiedad CSS3 tal vez? Gracias

Ejemplo de más abajo muestra dos intentos:

<!DOCTYPE html> 
<body> 
    <div id="display_a">Scroll is: 0</div> 
    <div id="display_b">Scroll is: 0</div> 
    <div id="element" style="width:800px;overflow-x:scroll;-webkit-overflow-scrolling:touch;"> 
     <div style="font-size:100px;width:1850px;"> 
      a b c d e f g h i j k l m n o p q r s t u v w x y z 
     </div> 
    </div> 
    <script> 
     var e = document.getElementById("element"); 
     var display_a = document.getElementById("display_a"); 
     var display_b = document.getElementById("display_b"); 
     e.addEventListener("scroll",function(event){display_a.innerHTML = "Scroll is: " + event.target.scrollLeft;}); 
     setInterval(function(){display_b.innerHTML = "Scroll is: " + e.scrollLeft;},100); 
    </script> 
</body> 
</html>

ACTUALIZACIÓN ============ ============

IOS 8 ha ordenado este comportamiento. Los eventos de desplazamiento ahora se activan mientras se desplaza.

Tenga en cuenta que ahora tendrá que lidiar con los valores de desplazamiento negativo durante el desplazamiento de rebote.

Fuente

2011-12-17 Jamie G

Solo quería dar las gracias a todos los que han contribuido hasta el momento, me temo que no vamos a encontrar una solución perfecta, pero hay algunas buenas sugerencias a continuación. –

El problema persiste en los navegadores de terceros en iOS> 8.x – Thomas

Los eventos de desplazamiento no se activan en webapps de pantalla de inicio o en UIWebView – MachineElf

En la Biblioteca de desarrolladores de iOS, no existe una explicación en las directrices de Safari al respecto:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Básicamente, el flujo del evento a que el desplazamiento es la siguiente: táctil/empiece a arrastrar (evento rueda del ratón) -> pan/movimiento (sin eventos) -> stop (onscroll)

Así que no hay nada como un evento continuo de desplazamiento que se desencadena mientras que la panoramización ocurre allí solo un desplazamiento al final del gesto.

Si encuentra una forma opcional para lograr eso, hágamelo saber :)

Fuente

2011-12-22 17:18:12 pixshatterer

Me temo que aún no estoy más cerca de este, pero sin dudas lo sabré a todos y cuando encuentro una solución. Gracias a todos. –

Esto podría ayudar. Es una solución jQuery que estoy usando para forzar la paginación en los deslizamientos de IOS de lado a lado. No es exactamente el mismo caso en que estás trabajando. Estoy usando el "overflow-scrolling: auto" que no se comporta como la versión "táctil".

#yourDiv { 
    -webkit-overflow-scrolling: auto; 
    overflow:auto; 
}

Uso "overflow-scrolling: auto" porque reacciona más rápido al evento touchend. Desafortunadamente, "overflow-scrolling: touch" parece resistir javascript y animación CSS mientras está en movimiento. Pero al menos puede obtener información de ubicación durante el desplazamiento.

var pageSwiping = false; 

$('#yourDiv').on('scroll', function(e) { 
    if (pageSwiping !== true ) { 
     pageSwiping = true; 
     var offset = $('#'+e.target.id).scrollLeft(); 
     $('#yourDiv').one('touchend',{elem:e.target.id,dragStart:offset},divMove); 
    }; 
}); 

var divMove = function(e) { 
    pageSwiping = false; 
    var elem = e.data.elem; 
    var dragEnd = $('#'+elem).scrollLeft(); 
    var dragDelta = (dragEnd - e.data.dragStart) 
     // Make page-alignment decisions based on dragDelta 
};

Fuente

2012-01-09 14:14:12 mattsahr

Hola Matt, acabo de recibir esta respuesta. Es una solución posible, pero me encanta la sensación del desplazamiento nativo de iOS, así que estoy buscando mantener eso (sin intentar replicar el código de momento de arrastre que tiene iOS). ¡Gracias! –

-1

Si ayuda, scrollTop y scrollLeft se actualizan en tiempo real dentro del controlador de eventos touchmove:

$(function() 
{ 
    var $div = $("#scroll") 
    var $p = $("#display"); 

    var update = function(e) 
    { 
     $p.text(e.type +": "+ $div.scrollLeft() +", "+ $div.scrollTop()); 
    } 

    $div.bind("touchmove", update) 
     .bind("scroll", update); 
});

Fuente

2012-04-09 01:44:11

Para tener en cuenta, si desea mantener elementos estáticos en la pantalla, posición: CSS fijo se introdujo con iOS 5. –

Esto supone una dependencia jQuery – donohoe

JQuery se usó para una breve demostración de trabajo; scrollTop, scrollLeft y touchmove son estándar sin él. –

En una situación similar que estoy usando scrollability.js, lo que hace un muy buen trabajo simulando la Comportamiento de desplazamiento nativo. Estoy escuchando el evento 'scrollability-start' y estoy supervisando los atributos top/left del elemento desplazado. Sé que no es ideal, pero es una alternativa decente.

Fuente

2012-04-23 20:33:15 spacehelmetboy

Tengo que decir que realmente hace un trabajo bastante bueno simulando el desplazamiento de estilo iOS. Ciertamente echaré un vistazo adecuado a algún punto. Gracias por la sugerencia –

también echa un vistazo a [iScroll] (http://cubiq.org/iscroll-4), que hace lo mismo, pero encontré más útil debido a métodos como scrollTo() y scrollToElement(). – spacehelmetboy

lo que sé es raro, pero se puede realizar un seguimiento de scrollLeft/scrollTop simplemente registrándose touchstart evento:

e.addEventListener("touchstart",function(event){});

Fuente

2013-02-19 09:38:38 David

Gracias David, pero seguramente esto no sirva de nada después de que hayas tocado con el dedo de la pantalla táctil y es solo el impulso el que lo mantiene desplazándose. ¿O me estoy perdiendo algo? –

Estás en lo correcto, ahora estoy enfrentando el mismo problema. – David

obtener la posición de una rueda de desplazamiento horizontal, mientras que srolling (a través de CSS overflow-y: desplazamiento)

$('#myNode').bind('scroll', function(e){ 
    var myPos = e.target.scrollLeft; 
    // do something with myPos but don't naughty 
})

Fuente

2013-03-13 15:03:14 flunder

Esto supone una dependencia jQuery – donohoe

Aquí es donde mi repositorio he añadido la devolución de llamada onScrolling() que me permita saber cuando la animación de desplazamiento impulso está ocurriendo en animate(): https://github.com/simpleshadow/iscroll/blob/master/src/iscroll.js

He hecho una aplicación ejemplo usando su sugerencia aquí: http://jsfiddle.net/simpleshadow/wQQEM/22/

@ robertlawson86 en Github hizo esta sugerencia para ayudar a proporcionar una idea sobre el momento de tomar la posición durante el movimiento de desplazamiento. Ver ejemplo y discusión: https://github.com/cubiq/iscroll/issues/183

Fuente

2013-04-02 08:08:02 Corey

Posición de desplazamiento actual al usar -webkit-overflow-scrolling: táctil - Safari iOS evento de javascript (scrollTop/scrollLeft)

Respuesta

Cuestiones relacionadas