javascript - propiedades - Strange/Inconsistent scroll Comportamiento superior

parametro event

Question

Tropecé con este mientras trataba de desplazar un elemento sin invocar a los controladores de eventos normales

Usando tanto Firefox como IE10 estoy viendo un comportamiento realmente extraño en la forma en que funciona el método scrollTop . Por ejemplo, si configuro scrollTop en un div y luego , ato un manejador de eventos de scroll al mismo elemento, el manejador se dispara inmediatamente. A partir de mis pruebas, esto no ocurre con Chrome, lo que me lleva a pensar que FF e IE están aplicando la minúscula cantidad de animaciones a sus pergaminos, o esto es algún tipo de error.

Ver ejemplo JSFiddle . Curiosamente, si establezco un tiempo de espera de 1 ms antes de la tarea, el problema desaparece . Me encantaría saber qué está pasando aquí, y cuál es el mejor enfoque para solucionarlo.

Actualización : A partir de los comentarios a continuación, parece que esto podría ser un comportamiento normal del navegador, por lo que actualizaré mi pregunta para preguntar qué está sucediendo aquí. Por favor, cite algunos artículos interesantes que explican este proceso con más detalle .

Answer 1

Lo que sucede en IE y FF es el siguiente:

1. La propiedad scrollTop se ajusta
2. Se agrega el controlador de eventos de desplazamiento
3. La ejecución de la función termina. Ahora, el navegador tiene tiempo para otras cosas y renderizará la página. La representación hace que tanto el controlador de desplazamiento como la propiedad scrollTop se comprometan simultáneamente. El cambio scrollTop activa un evento de desplazamiento capturado por su controlador.

Esto es diferente a este código:

var dv = document.getElementsByTagName("div")[0];
dv.scrollTop = dv.scrollHeight;
setTimeout(function(){
    dv.onscroll = function() { 
    console.log("scrolled!");
}, 0);

Donde lo siguiente es feliz:

1. La propiedad scrollTop se ajusta
2. La función setTimeout agrega la función que agrega el controlador de eventos onscroll a la cola de eventos. Esencialmente diferir la ejecución del código hasta que se produzca el procesamiento de tiempo de espera (ver también la ventana más reciente. SetImmediate).
3. La ejecución de tu función finaliza. Ahora, el navegador tiene tiempo para otras cosas y renderizará la página. La representación desencadenará un evento de desplazamiento, pero debido a que su función se aplazó, aún no se ha agregado y, por lo tanto, nada captura el evento de desplazamiento.
4. Renderiza la página termina. Ahora, el navegador tiene tiempo para otras cosas y ejecutará la función establecida por setTimeout. Esto agregará el controlador de eventos onscroll, pero como el evento de desplazamiento ya se ha activado, no se llamará al controlador de eventos.

Puede encontrar más información sobre el tema aquí y aquí .