cambio css en caso de desplazamiento w/Frame requestAnimation

Question

quiero cambiar el color de fondo de los elementos en la ventana gráfica (usando overflow: scroll)

Así que aquí fue mi primer intento: http://jsfiddle.net/2YeZG/

Como se puede ver, hay es un breve parpadeo del color anterior antes de pintar el nuevo color. Otros tienen had similar problems.

Tras la HTML5 rocks instructions, que trató de introducir requestAnimationFrame para solucionar este problema fue en vano:

http://jsfiddle.net/RETbF/

¿qué estoy haciendo mal aquí?

---

Aquí es un ejemplo más simple que muestra el mismo problema: http://jsfiddle.net/HJ9ng/

---

fallo Archivado con cromo aquí: http://code.google.com/p/chromium/issues/detail?id=151880

Answer 1

si es sólo el color de fondo, así ¿por qué no simplemente cambie el color de fondo de los padres a rojo y una vez que se desplaza, simplemente cámbielo a rosa?

puedo cambiar el CSS para que

#dad 
{ 
    overflow-y: scroll; 
    overflow-x: hidden; 
    width: 100px; 
    height: 600px; 
    background-color:red; 
}​ 

elimino algunos de ustedes Jquery y el cambio a este

dad.bind('scroll', function() { 
    dad.css('background-color', 'pink'); 
}); 

Y me quite esta línea

iChild.css('backgroundColor', 'red'); 

sino que es el El color rojo es importante que no funcionará con seguridad http://jsfiddle.net/2YeZG/5/

Answer 2

Me gusta la solución de Manuel. Pero aunque no entiendo exactamente lo que intentas hacer, quiero señalar algunas cosas. En su código de violín, vi que incluía la versión de Paul Irish's shim para requestAnimationFrame. Pero nunca lo usas. (Es básicamente un setTimeOut confiable, nada más) es de animaciones basadas en marcos.)

Así que como solo quieres cambiar algunas propiedades de CSS, no veo por qué lo necesitarías. Incluso si desea transiciones, debe confiar en las transiciones de CSS.

Aparte de eso el código podría ser algo como

dad.bind('scroll', function() { 
    dad.css('background-color', 'pink'); 
    eachElemNameHere.css('background-color','randomColor'); 
}); 

también que idealmente no debería usar algo así como que si puede evitarlo. Solo debe agregar y eliminar nombres de clase y agregar todas estas propiedades en su CSS. Lo hace funcionar más rápido.

Además, de nuevo, aún no lo entiendo, pero podría utilizar la función jQuery para conocer la posición de cada elemento desde la parte superior para tener un mejor control.

Answer 3

Su problema parece ser que solo cambia el color de fondo de los elementos que ya se han desplazado a la vista. Su código espera que el navegador espere que su código maneje el evento de desplazamiento antes de que el navegador vuelva a dibujar su vista. Probablemente esto no sea una garantía dada por las especificaciones de HTML. Es por eso que parpadea.

Lo que debe hacer en su lugar es cambiar los elementos que se desplazarán a la vista. Esto está relacionado con fuera de la pantalla que representa o doble buffering como se llama en la programación de juegos de computadora. Usted construye su escena fuera de la pantalla y copia la escena terminada en el búfer de cuadros visibles.

Modifiqué su primer JSFiddle para incluir un multiplicador para la altura del área de desplazamiento: http://jsfiddle.net/2YeZG/13/.

dad.bind('scroll', function() { 
    // new: query multiplier from input field (for demonstration only) and print message 
    var multiplier = +($("#multiplier")[0].value); 
    $("#message")[0].innerHTML=(multiplier*100)-100 + "% of screen rendering"; 

    // your original code 
    var newScrollY = newScrollY = dad.scrollTop(); 
    var isForward = newScrollY > oldScrollY; 
    var minVal = bSearch(bots, newScrollY, true); 

    // new: expand covered height by the given multiplier 
    //  multiplier = 1 is similar to your code 
    //  multiplier = 2 would be complete off screen rendering 
    var newScrollYHt = newScrollY + multiplier * dadHeight; 

    // your original code (continued) 
    var maxVal; 
    for (maxVal = minVal; maxVal < botsLen; maxVal++) { 
     var nxtTopSide = tops[maxVal]; 
     if (nxtTopSide >= newScrollYHt) { 
      break; 
     } 
    } 
    maxVal = Math.min(maxVal, botsLen); 
    $(dadKids.slice(minVal, maxVal)).css('background', 'pink'); 
}); 

Su código tenía un multiplicador de 1, lo que significa que se actualizan los elementos que son actualmente visible (100% de la altura de la zona de desplazamiento). Si configura el multiplicador en 2, obtendrá actualizaciones completas fuera de la pantalla para todos sus elementos. El navegador actualiza elementos suficientes al nuevo color de fondo para que incluso un desplazamiento al 100% muestre los elementos actualizados. Dado que el navegador raramente se desplaza el 100% del área en un solo paso (¡depende del sistema operativo y del método de desplazamiento!), Puede ser suficiente reducir el multiplicador a p. Ej. 1.5 (lo que significa 50% de reproducción de pantalla). En mi máquina (Google Chrome, Mac OS X con panel táctil) no puedo producir ningún parpadeo si el multiplicador es 1.7 o superior.

BTW: Si hace algo más complicado que simplemente cambiar el color de fondo, no debe hacerlo una y otra vez. En su lugar, debe verificar si el elemento ya se ha actualizado y realizar el cambio solo después.