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 los eventos de ajuste integrados, el estado de ajuste invisible anteriormente se convertirá en una acción en el momento adecuado 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 sobre el 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

Tenemos buenas noticias: estos eventos nuevos ponen esta información a disposición de los usuarios de forma rápida y sencilla. Esto desbloquea las interacciones de ajuste del desplazamiento para ir más allá de su capacidad actual y permite la orquestación de relaciones de ajuste del desplazamiento y situaciones de comentarios de IU nuevas.

scrollSnapChange

Este evento se activa solo si un gesto de desplazamiento hace que se coloque un nuevo objetivo de ajuste 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á el evento, incluso si un usuario interactuó con el control deslizante. 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á de inmediato mientras el usuario se desplaza con el dedo o con 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 ejemplo principal 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

En los siguientes patrones, se muestran algunos casos de uso para 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 la leyenda 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. En esta demostración, se explica cómo el elemento al que se ajusta el navegador no siempre es el que crees.

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 controles de desplazamiento vinculados

Esta demostración tiene dos contenedores de ajuste de desplazamiento, uno de los cuales es una lista de vínculos de alto nivel y el otro es el contenido paginado real. El nuevo evento scrollSnapChanging facilita la vinculación de los estados de ajuste de estos 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 deslizantes, 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. Para los usuarios de teclado, puedes usar la tecla Tab y 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

Esta demostración mejora de forma progresiva la experiencia de ajuste del desplazamiento con transiciones activadas por ajuste con 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 cubierta

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
Snap to reveal
Sonido al tomar una foto
IU de deslizamiento
Pestañas o carruseles deslizables

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.