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.

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

Comentarios: 2

  1. en mobiles cuando haces scroll con el touch funciones como el parallax dejan de funcionar :'(

    ResponderEliminar
    Respuestas
    1. Gracias por el dato, "Unknown"
      Sí, entre otras cosas ya conocía que hay navegadores, en sus versiones para móviles y para prevenir clicks indeseados, que mientras se está desplazando la página (al hacer "arrastre" por ejemplo) todos los eventos de ratón quedan en suspenso hasta que no termina el desplazamiento.
      En el detalle del parallax no me había fijado.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap