A partir de Chrome 129, puedes usar los eventos scrollSnapChange y scrollSnapChanging de 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. Esto no es conveniente sin estos eventos.
Antes del scrollSnapChange, se podía usar un observador de intersección para encontrar qué elemento atravesaba el puerto de desplazamiento, pero determinar lo que se ajustaba estaba restringido a unas pocas circunstancias. Por ejemplo, puedes detectar si los elementos de ajuste ocupan el puerto de desplazamiento o la mayor parte del puerto de desplazamiento. Para ello, debes observar los elementos que se cruzan en el área de desplazamiento. Luego, en función del elemento que consume la mayor parte del área de desplazamiento, supón que este era 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 cambia el objetivo de ajuste o a qué se cambia (por ejemplo, con un deslizamiento de desplazamiento).
Se muestra un desplazador horizontal con cuadros numerados dentro como objetivos de ajuste. A la izquierda, hay un registro en tiempo real de los eventos de desplazamientoSnapChange, en el que se destaca SnapTargetInline con azul. A la derecha, hay un registro en tiempo real de los eventos descrollSnapChange, en el que se destaca SnapTargetInline con gris.
¡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.
- Cuando el desplazamiento haya descansado.
- Antes del
scrollend
Este evento se activa justo antes de scrollend, cuando se completa el desplazamiento y solo si se apoya un nuevo objetivo de ajuste. Esto hace que el evento se sienta diferido o justo a tiempo cuando se complete 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 de evento como snapTargetBlock y snapTargetInline. Si la barra de desplazamiento es solo horizontal, la propiedad snapTargetBlock será null. El valor de la propiedad será el nodo del elemento.
Detalles únicos de desplazamientoSnapChange
No se activa hasta que el usuario suelta su gesto
Un dedo que aún se encuentra en la pantalla o los dedos del panel táctil indican que el gesto del usuario no finalizó el desplazamiento, lo que significa que el desplazamiento no finalizó, lo que significa que el objetivo de ajuste aún no cambió y que está pendiente 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 finalice el proceso, se seguirá activando el evento scrollend.
scrollSnapChanging
Este evento se activa en cuanto el navegador decide que el gesto de desplazamiento tiene o generará un nuevo objetivo de ajuste. Se activa con entusiasmo 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 de evento como snapTargetBlock y snapTargetInline. Si la barra de desplazamiento es solo vertical, la propiedad snapTargetInline será null. El valor de la propiedad será el nodo del elemento.
Detalles únicos de desplazamientoSnapChanged
Se activa temprano 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. Supongamos que un usuario se desplaza lentamente sin levantar un dedo: scrollSnapChanging se activará varias veces durante el gesto, siempre y cuando el usuario se desplace por varios objetivos de ajuste posibles. Cada vez que el usuario se desplaza, si el navegador determina que, al momento de su lanzamiento, se apoya en un nuevo objetivo de ajuste, el evento se activa para indicarte qué elemento es ese.
No dispara todos los objetivos de ajuste junto a un nuevo objetivo
Además, considera un lanzamiento, en el que un usuario hace un gesto de desplazamiento que abarca varios objetivos de ajuste a la vez. este evento se activará una vez con el objetivo sobre el que se apoyará. Así que es ansiosa, pero no desperdicia, y te proporciona el objetivo de ajuste lo antes posible.
Casos de uso y ejemplos
Estos eventos habilitan muchos casos de uso nuevos y facilitan la implementación de los patrones actuales. Un buen ejemplo es habilitar la animación activada por ajuste. Revela 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.
Destacar un testimonio
Este ejemplo promociona o enfoca visualmente el testimonio extraído.
scroller.onscrollsnapchange = event => {
scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
event.snapTargetInline.classList.add('snapped')
}
Mostrar la leyenda del elemento ajustado
En este ejemplo, se muestra la leyenda para el elemento ajustado. Ambos eventos se incluyen en esta demostración, por lo que puedes ver las diferencias de tiempo y experiencia del usuario entre scrollSnapChange y scrollSnapChanging.
Cambio de ajuste
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 una nueva diapositiva se posicionó, lo cual es un buen momento para animar el contenido una vez.
document.addEventListener('scrollsnapchange', event => {
event.snapTargetBlock.classList.add('seen')
})
Cómo ajustar tanto x como y en un desplazador
El ajuste de desplazamiento funciona para desplazadores que permiten 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 una barra de desplazamiento horizontal y vertical. El borde discontinuo representa el objetivoscrollSnapChange y el borde sólido es el objetivoscrollSnapChange. El rojo representa SnapTargetInline y el azul, SnapTargetBlock.
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 hace que sea trivial vincular los estados de ajuste de estos de forma bidireccional para que siempre estén sincronizados.
Selector de color de OKLCH
Esta demostración tiene 3 desplazadores, cada uno de los cuales representa un canal de color diferente en OKLCH. El elemento ajustado se sincroniza con su grupo de botones de selección relevante y los datos se pueden recuperar desde un formulario que une las entradas. Con un mouse o un usuario 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.
desplazamientoSnapChange se usa para sincronizar con anticipación el elemento ajustado con el estado, mientras quescrollSnapChange 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/OJeOOVGSe están ajustando los concentradores animados y sorprendentes
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 los eventos con el siguiente JavaScript:
if ('onscrollsnapchange' in window) {
// ok to use snap change
}
Entrada de regla desplazable
Esta demostración presenta una regla desplazable como una forma alternativa de seleccionar la 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.
Flujo de la portada
Esta demostración se basa en la excelente recreación de animación basada en desplazamientos de Bramus Van Damme del famoso flujo de covers de macOS (también incluye video instructivo). De manera única, se usa scrollSnapChanging para ocultar el título del álbum y scrollSnapChange para presentarlo. Los eventos ayudan a organizar un ocultamiento inmediato del título anterior y una presentación diferida del nuevo.
Más ideas para inspirar un poco de creatividad
Ahora que es trivial saber qué elemento está a punto de ajustarse y cuál se ajusta de manera activa, hay muchas posibilidades nuevas. Esta es una lista de ideas que te ayudarán a inspirar la creatividad y a otros casos de uso:
- Activar la carga diferida, lo que se conoce como Snapchange activó la renderización o la recuperación de datos.
- Miniaturas de la tira de película vinculadas a una imagen más grande.
- Activar o desactivar la reproducción/pausa de un avance de video para una miniatura de video ajustada.
- Seguimiento de Analytics
- Desplazamiento
- IU/UX de la rueda de la fortuna
- El objetivo de ajuste obtiene un cuadro de información fijo.
- Presiona para ajustar
- Ajustar para revelar
- Sonidos al abrir
- IU de deslizamiento
- Pestañas o carruseles que se pueden deslizar
Más estudios
El equipo de Chrome está entusiasmado con lo que compilarás con estas nuevas APIs y espera que ayude a optimizar tus experiencias desplazables.