soy Kseso y esto EsCSS

Mientras haces scroll ya no hay más eventos de ratón

Las novedades en los navegadores sobre cómo manejan los eventos de ratón y lo asociado a ello (estilos o javascript) mientras se hace scroll en la página

Mientras haces scroll ya no hay más eventos de ratón

·Por Kseso ✎ 2
Mientras haces scroll ya no hay más eventos de ratón

Una característica o función tradicional de los navegadores era (y uso el pasado) que mientras se realizaba scroll (desplazamiento de la página) calculaba y actualizaba la posición del puntero cada 100 ms (milisegundos)

Y al actualizar la posición del ratón también suponía la actualización de los estilos implicados por la pseudoclase :hover así como todos los eventos del tipo mousemove, mouseover, mouseenter, mouseleave, mouseout

Este comportamiento en según qué situaciones incidía, para mal, en el funcionamiento del navegador (recursos para saber dónde está) y en la experiencia del usuario al desplazarse por la página (repaint y reflows o incluso clicks indeseados).

Para evitar los efectos derivados de esa actualización de posición del puntero se recurría a una serie de técnicas, como añadir un retraso de 100ms a las transiciones basadas en :hover o incluso al uso de pointer-events: none;.

Algunas de estás técnicas puedes encontrarlas detalladas en estos artículos:

No más eventos durante el scroll

Bien. Pues nada de lo anterior es ya necesario. Un tuit de Paul Irish me psuo sobre la pista de esta novedad y mejora de los navegadores

Paul Irish This isn't necessary any longer. browsers will not apply :hover styles during scroll. chrome fixed this ~4 months ago. [1]

Como ves, Chrome hace un tiempo que implementó deshabilitar todo lo relativo a los eventos del ratón mientras se hace scroll.

¿Y el resto de navegadores?

  • Internet Explorer 11: Envía eventos / actualizaciones :hover sólo si el ratón se mueve realmente, con algunas excepciones por razones de compatibilidad.
  • Firefox: Envía eventos / actualizaciones del :hover después de transcurridos 100ms sin ningún scroll, pero no envía eventos mousemove al menos que el puntero del ratón se mueve realmente.
  • Safari: Recientemente cambió a enviar eventos / actualización de :hover después de transcurridos 100ms sin ningún scroll.

Si quieres saber el comportamiento de tu navegador con el :hover o los eventos del ratón mientras haces scroll puedes testearlo en esta página o en esta otra o en el siguiente pen:

See the Pen If Scroll... no mouse events by Kseso (@Kseso) on CodePen.

Ver Pen a Full

Puedes obtener más información en este hilo de los grupos de Google.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso