La funcion scroll() y scroll-timeline

En la propiedad animation-timeline que explicamos en el artículo anterior, utilizamos la función scroll(), pero aún no la conocemos bien, así que vamos a profundizar y a ver sus posibilidades.

La función `scroll()`

La función scroll() recibe dos parámetros. El primero es el elemento contenedor que usaremos de referencia para el desplazamiento, y el segundo es el eje en el que vamos a desplazarnos. La sintaxis es la siguiente:

Función scroll()	Descripción
`scroll()`	Valores por defecto. Equivalente a `scroll(nearest block)`.
`scroll(` `contenedor` `eje)`	Indica el contenedor y la orientación del eje de la línea de tiempo.

Observa que los parámetros a utilizar son el contenedor y el eje de la orientación en la que se desplaza. Si se omiten los parámetros, se tomarán los valores por defecto, que son nearest block.

Opciones de `scroll()`

Los parámetros disponibles para la función scroll() son los siguientes:

Parámetro	Valores posibles	Descripción
	nearest	Utiliza el elemento contenedor padre más cercano. Valor por defecto.
	`root`	Utiliza el documento entero como contenedor.
	`self`	Utiliza el elemento actual como contenedor específico.
	block \| `x`	Indica el eje horizontal como eje de progreso ⚠️
	`inline` \| `y`	Indica el eje vertical como eje de progreso ⚠️

Recuerda que block e inline son las versiones lógicas de x e y respectivamente, y pueden ser diferentes en otros idiomas. Puedes ver más sobre este tema en Propiedades Lógicas en CSS.

Ejemplo de `scroll()`

Veamos un ejemplo utilizando la función scroll() donde creamos una animación que va desde color de fondo blanco a color negro, invirtiendo el color de texto también. Algunos detalles:

1️⃣ En este caso, creamos la animación sobre el elemento <body>.
2️⃣ Con max-height limitamos el alto y con overflow mostramos la barra de desplazamiento.
3️⃣ La función scroll() define root, por lo que se dispara al hacer scroll en la página completa.
4️⃣ La función scroll() define block, por lo que el desplazamiento se pide en vertical.

body {
  max-height: 200px;
  font-size: 8rem;
  overflow: hidden scroll;
  animation: change-color linear forwards;
  animation-timeline: scroll(root block);
}

@keyframes change-color {
  from { background: white; color: black }
  to { background: black; color: white }
}

<p>
  Esto es un ejemplo de texto muy largo para rellenar el contenedor
  y tener suficiente contenido como para hacer scroll.
</p>

Ahora vamos a modificar el mismo ejemplo, y hacer unos cambios para que el scroll sea sobre un elemento concreto y no sobre la página completa.

1️⃣ Ahora la barra de desplazamiento aparece en el , en lugar del <body>.
2️⃣ Hemos modificado la función scroll() para definir self en lugar de root.
3️⃣ Con self el desplazamiento se dispara la hacer scroll sobre ese elemento: .
4️⃣ El desplazamiento sobre <body> no dispara la animación.

body {
  max-height: 200px;
  font-size: 8rem;
}

p {
  max-height: 150px;
  overflow: hidden scroll;
  animation: change-color linear forwards;
  animation-timeline: scroll(self block);
}

@keyframes change-color {
  from { background: white; color: black }
  to { background: black; color: white }
}

<p>
  Esto es un ejemplo de texto muy largo para rellenar el contenedor
  y tener suficiente contenido como para hacer scroll.
</p>

Si en el primer ejemplo, utilizaramos nearest tendríamos el mismo efecto. En el primer caso tenemos la animación sobre el elemento <body>, por lo que el contenedor padre más cercano es la página completa, equivalente a root.

Por otro lado, si en el segundo ejemplo utilizaramos nearest, como la animación está sobre el elemento , el contenedor padre más cercano es <body>. Si hacemos scroll en el elemento  no ocurrirá nada, pero si hacemos scroll en el documento, veremos como la animación se aplica al elemento .

La propiedad `scroll-timeline`

Hasta ahora, y probablemente sin saberlo, hemos creado líneas de tiempo (timelines) anónimos, es decir, sin nombre. Sin embargo, CSS nos da la posibilidad de crearlos con un nombre concreto, y de esta forma poder crear múltiples timelines y ser más selectivo y organizado a la hora de crear animaciones.

Propiedad	Descripción
`scroll-timeline-name`	Establece un nombre para el timeline, por ejemplo, `--color-timeline`.
`scroll-timeline-axis`	Define el eje de orientación: `block`, `inline`, `x` o `y`.
`scroll-timeline`	Propiedad de atajo de las dos anteriores.

Al utilizar estas propiedades, creamos una línea de tiempo, pero en lugar de ser anónima tiene un nombre determinado (debemos usar la sintaxis de variables CSS) y está acoplada al elemento donde lo creamos.

Volvamos a crear el ejemplo anterior, pero esta vez utilizando líneas de tiempo con nombre:

body {
  max-height: 200px;
  font-size: 8rem;
}

p {
  max-height: 150px;
  overflow: hidden scroll;
  animation: change-color linear forwards;
  scroll-timeline: --color-timeline block;
  animation-timeline: --color-timeline;
}

@keyframes change-color {
  from { background: white; color: black }
  to { background: black; color: white }
}

<p>
  Esto es un ejemplo de texto muy largo para rellenar el contenedor
  y tener suficiente contenido como para hacer scroll.
</p>

En este caso, hemos hecho lo siguiente:

1️⃣ Hemos creado la animación en el elemento .
2️⃣ Con scroll-timeline creamos una línea de tiempo en  y eje vertical.
3️⃣ Ahora, activamos la línea de tiempo --color-timeline en ese elemento.

Es muy posible que te interese utilizar este tipo de animación para mostrar elementos a medida que haces scroll y llegas a ellos. Para eso, es mejor utilizar la función view(), que explicaremos en el próximo artículo.