Gracias por seguir Google I/O. Mira contenido a pedido.

Se usó la API de Cloud Translation para traducir esta página.

Eventos de instantáneas de desplazamiento

Adam Argyle

A partir de Chrome 129, puedes usar los eventos scrollSnapChange y scrollSnapChanging desde JavaScript. Si implementas eventos de ajuste integrados, el estado de ajuste que antes era invisible se volverá accionable, en el momento correcto y siempre será correcto. Esta no es una ventaja que tuvieras sin estos eventos.

Navegadores compatibles

Origen

Navegadores compatibles

Origen

Antes de scrollSnapChange, podías usar un observador de intersección para encontrar qué elemento cruzaba el puerto de desplazamiento, pero determinar qué se ajustaba se limitaba a algunas circunstancias. Por ejemplo, puedes detectar si los elementos de ajuste ocupan todo el puerto de desplazamiento o la mayor parte de este. Para ello, debes observar los elementos que se cruzan en el área de desplazamiento y, luego, según el elemento que consume la mayor parte del área de desplazamiento, suponer que este es el objetivo de ajuste. Luego, espera a scrollend y actúa en función del elemento ajustado (el objetivo de ajuste).

Sin embargo, antes de scrollSnapChanging, era imposible saber cuándo cambiaba el objetivo de ajuste o a qué se cambiaba (como cuando se daba un deslizamiento del desplazamiento).

Se muestra un control deslizante horizontal con cuadros numerados dentro como objetivos de ajuste. A la izquierda, se muestra un registro en tiempo real de los eventos scrollSnapChange, que destaca snapTargetInline en azul. A la derecha, se muestra un registro en tiempo real de los eventos scrollSnapChanging, que destaca snapTargetInline con gris.

Pruébala
https://codepen.io/web-dot-dev/pen/jOjaaEP

¡Buenas noticias! Estos nuevos eventos permiten que esta información esté disponible de forma rápida y sencilla. Esto desbloquea las interacciones de ajuste de desplazamiento para ir más allá de su capacidad actual y permite la organización de relaciones de ajuste de desplazamiento y situaciones nuevas de comentarios de la IU.

scrollSnapChange

Este evento se activa solo si un gesto de desplazamiento dio lugar a que un nuevo objetivo de ajuste se haya apoyado en el siguiente orden.

Después de que se detenga el desplazamiento.
Antes del scrollend.

Este evento se activa justo antes de scrollend, cuando se completa el desplazamiento y solo si se colocó un nuevo objetivo de ajuste. Esto hace que el evento se sienta diferido o justo a tiempo cuando se completa el gesto de desplazamiento.

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

El evento expone el elemento ajustado en el objeto del evento como snapTargetBlock y snapTargetInline. Si el control deslizante es solo horizontal, la propiedad snapTargetBlock será null. El valor de la propiedad será el nodo del elemento.

Detalles únicos para scrollSnapChange

No se activa hasta que el usuario suelta el gesto.

Si un dedo permanece en la pantalla o en un panel táctil, significa que el gesto del usuario no terminó de desplazarse, lo que significa que el desplazamiento no finalizó, lo que significa que el objetivo de ajuste aún no cambió, está pendiente de un gesto completo del usuario.

No se activa si el objetivo de ajuste no cambió.

El evento es para el cambio de ajuste y, si el objetivo de ajuste no cambió, no se activará, incluso si un usuario interactuó con la barra de desplazamiento. Sin embargo, el usuario se desplazó, por lo que, cuando se completó el desplazamiento, el evento scrollend aún se activó.

scrollSnapChanging

Este evento se activa en cuanto el navegador decide que el gesto de desplazamiento tiene o tendrá un nuevo objetivo de ajuste. Se activa con entusiasmo y durante el desplazamiento.

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

El evento expone el elemento ajustado en el objeto del evento como snapTargetBlock y snapTargetInline. Si el control deslizante es solo vertical, la propiedad snapTargetInline será null. El valor de la propiedad será el nodo del elemento.

Detalles únicos para scrollSnapChanging

Se activa con anticipación y con frecuencia durante un gesto de desplazamiento.

A diferencia de scrollSnapChange, que espera un gesto de desplazamiento completo del usuario, este evento se activará con anticipación mientras el usuario se desplaza con el dedo o usa un panel táctil. Considera un usuario que se desplaza lentamente sin levantar un dedo. scrollSnapChanging se activará varias veces durante el gesto, siempre y cuando el usuario esté haciendo un barrido sobre varios objetivos de ajuste posibles. Cada vez que el usuario se desplaza, si el navegador determinó que, cuando se suelte, se detendrá en un nuevo objetivo de ajuste, se activará el evento para indicarte qué elemento es.

No activa todos los objetivos de ajuste en el camino hacia un nuevo objetivo de ajuste.

Además, considera un deslizamiento, en el que un usuario realiza un gesto de lanzamiento de desplazamiento que abarca varios objetivos de ajuste a la vez. Este evento se activará una vez con el objetivo en el que se detendrá. Por lo tanto, es rápido, pero no desperdicia recursos, y te proporciona el objetivo de ajuste lo antes posible.

Casos de uso y ejemplos

Estos eventos permiten muchos casos de uso nuevos y, al mismo tiempo, facilitan mucho la implementación de los patrones actuales. Un buen ejemplo es habilitar la animación activada por ajuste. Revelar contextualmente el elemento de ajuste, los elementos secundarios del elemento de ajuste o la información asociada cuando es el objetivo de ajuste

Los siguientes patrones demuestran algunos casos de uso que pueden ayudarte a ser productivo de inmediato.

Destaca un testimonio

En este ejemplo, se promociona o se enfoca visualmente el testimonio intercalado.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

https://codepen.io/web-dot-dev/pen/dyBZZPe

Mostrar el título del elemento ajustado

En este ejemplo, se muestra la leyenda del elemento ajustado. Ambos eventos se incluyen en esta demostración para que puedas ver las diferencias de tiempo y experiencia del usuario entre scrollSnapChange y scrollSnapChanging.

Snap Changing
https://codepen.io/web-dot-dev/pen/wvLPPBL

Snap Change
https://codepen.io/web-dot-dev/pen/QWXOObw

Anima una vez los elementos secundarios de una diapositiva de presentación ajustada

En este ejemplo, se sabe cuándo se llegó a una diapositiva nueva y se detuvo en ella, lo que es un buen momento para animar el contenido una vez.

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

https://codepen.io/web-dot-dev/pen/rNEYYVj

Ajuste en X e Y en un control de desplazamiento

El ajuste del desplazamiento funciona para los controles de desplazamiento que permiten el desplazamiento horizontal y vertical. En esta demostración, se muestran los objetivos scrollSnapChanging y scrollSnapChange a medida que te desplazas por la cuadrícula. Esta demostración ilumina cómo puede que el elemento al que se ajusta el navegador no siempre sea el que crees que es.

Se muestra una cuadrícula de cuadrados en un desplazamiento horizontal y vertical. El borde discontinuo representa el objetivo de scrollSnapChanging, y el borde sólido es el objetivo de scrollSnapChange. El rojo representa snapTargetInline y el azul representa snapTargetBlock.

https://codepen.io/web-dot-dev/pen/qBzVVdp

Dos desplazadores vinculados

Esta demostración tiene dos contenedores de ajuste de desplazamiento, en los que uno es una lista de vínculos de alto nivel y el otro es el contenido paginado en sí. El nuevo evento scrollSnapChanging facilita la vinculación de los estados de ajuste de estos elementos de forma bidireccional para que siempre estén sincronizados.

https://codepen.io/web-dot-dev/pen/YzoEEXj

Selector de color OKLCH

Esta demostración tiene 3 controles de desplazamiento, cada uno de los cuales representa un canal de color diferente en OKLCH. El elemento ajustado se sincroniza con su grupo de radio relevante y los datos se pueden recuperar desde un formulario que une las entradas. Para un usuario de mouse o táctil, puedes desplazarte hasta el valor que desees. Si eres usuario del teclado, puedes presionar Tab y usar las teclas de flecha. Para un lector de pantalla, es solo un formulario.

scrollSnapChanging se usa para sincronizar de forma anticipada el elemento ajustado con el estado, mientras que scrollSnapChange se usa para animar el encabezado del canal de color afectado al que se aplicó la entrada del usuario.

https://codepen.io/web-dot-dev/pen/OJeOOVG

Cómo ajustar nodos animados escalonados

En esta demostración, se mejora de forma progresiva la experiencia de ajuste de desplazamiento con transiciones activadas por ajuste a través de scrollsnapchange.

Verifica la compatibilidad con eventos con el siguiente código JavaScript:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

https://codepen.io/web-dot-dev/pen/MWMOOae

Entrada de regla desplazable

Esta demostración incluye una regla desplazable como una forma alternativa de elegir una longitud para una entrada numérica. Ingresa los valores directamente en la entrada numérica o desplázate hasta el tamaño. El evento de cambio se usa para borrar la selección durante el gesto del usuario, mientras que el evento de cambio se usa para actualizar el estado y reforzar la elección del usuario.

https://codepen.io/web-dot-dev/pen/LYKOOpd

Flujo de la portada

Esta demostración se basa en la excelente recreación de animación impulsada por desplazamiento de Bramus Van Damme del famoso flujo de portadas de macOS (también hay un instructivo en video). De manera única, scrollSnapChanging se usa para ocultar el título del álbum y scrollSnapChange se usa para presentarlo. Los eventos ayudan a organizar un ocultamiento anticipado del título anterior y una presentación diferida del nuevo.

https://codepen.io/web-dot-dev/pen/Bagmmog

Más ideas para inspirar tu creatividad

Ahora que es trivial saber qué elemento está a punto de ajustarse y cuál está ajustado de forma activa, hay muchas posibilidades nuevas. Esta es una lista de ideas para inspirar la creatividad y casos de uso adicionales:

Activa la carga diferida, conocida como renderización activada por cambio instantáneo o recuperación de datos.
Miniaturas de tiras de película vinculadas a una imagen más grande.
Activar o desactivar la reproducción o la pausa de un avance de video para una miniatura de video fija
Seguimiento de Analytics
Narrativa de desplazamiento
IU/UX de Wheel of Fortune
El objetivo de ajuste obtiene una información sobre herramientas anclada.
Presiona para ajustar
Cómo ajustar para revelar
Sonidos al abrir
IU de deslizamiento
Pestañas o carruseles que se pueden deslizar

Más estudios

El equipo de Chrome espera con entusiasmo ver lo que creas con estas nuevas APIs y espera que te ayuden a optimizar tus experiencias de desplazamiento.