Introducción a los puntos Snap de desplazamiento CSS

Introducción a los puntos Snap de desplazamiento CSS

El CSS Scroll Snap Module es un estándar web que nos da un cierto control sobre el desplazamiento en una página web para que podamos hacer que los usuarios se desplacen a partes concretas de una página en lugar de a cualquier lugar.

El desplazamiento es una de las acciones más realizadas en un sitio web. Los navegadores, a través de los años, han mejorado su rendimiento de desplazamiento para adaptarse a la fuerza y agilidad de los dedos de los usuarios. Y los desarrolladores han utilizado el desplazamiento de forma creativa para lograr una experiencia de usuario mejor.

Sin embargo, cuando se trata de la correlación entre codificación y desplazamiento, sólo JavaScript parecía tener todo el control sobre el desplazamiento. Esto fue así durante un largo período de tiempo, pero con la introducción de los puntos de desplazamiento snap, el CSS comenzó a ponerse al día.

Desplazamiento sin puntos Snap de desplazamiento

Por lo general, no nos desplazamos muy lentos, especialmente en los teléfonos. Cuanto más rápido te desplazas, menos control tienes sobre el lugar de la pantalla donde terminarás cuando dejes de desplazarte.

Imagina que está desplazándote a través de una matriz de imágenes de productos en un sitio web, o una galería de fotos o slides online. Lo que prefieres en tales aplicaciones es ver todo el producto, foto o slide cada vez que te desplazas. No sólo una parte de la imagen del producto, la foto o el slide.

En muchas ocasiones al desplazarnos  por la pantalla y hacer scroll, sólo la mitad de la imagen queda visible en la parte inferior o superior de la pantalla. Sin embargo, la mayoría de los usuarios preferirían ver la última imagen completa.

Desplazamiento con puntos Snap de desplazamiento

Aquí es donde acudimos a los CSS scroll snap points. El nombre se explica por sí mismo; es un estándar CSS que nos permite ajustar los elementos en su lugar cuando te desplazas.

Hay cinco propiedades CSS que constituyen este estándar:

  1.  scroll-snap-type
  2. scroll-snap-points-x
  3. scroll-snap-points-y
  4. scroll-snap-coordinate
  5. scroll-snap-destination

Soporte del navegador

Las propiedades necesitan -webkit y prefijos -ms para los navegadores relevantes. Al redactar este artículo, CSS scroll snap no es compatible con Chrome y Opera.

Ten en cuenta que es probable que las últimas cuatro propiedades sean eliminadas por los agentes de usuario en un futuro próximo. En su lugar, nuevas propiedades, a saber scroll-snap-alignscroll-snap-margin scroll-snap-paddingpodrían crearse, como se define en esta especificación.

Sin embargo, tendrán un propósito similar al de las propiedades anteriores. En la actualidad, el conjunto anterior de propiedades funcionarán bien.

Propiedades

Debes agregar la propiedad scroll-snap-type al contenedor de desplazamiento (el elemento contenedor cuyos hijos se desbordan mientras te desplazas). Especifica la rigurosidad de la acción rápida. Puedes tomar tres valores:

  1. mandatory- cuando se haya completado el desplazamiento, el desplazamiento se ajustará a un punto de referencia relevante
  2. proximity- menos estricto que mandatory; depende del juicio de la UA si el elemento se encajará en un punto de ajuste dado
  3. none - no se realiza ningún ajuste


Las propiedades scroll-snap-points-x y scroll-snap-points-y pertenecen también al contenedor de desplazamiento. Se refieren a puntos en los ejes x e y donde existirán los puntos de presión. Su valor viene dado por la función repeat(). Por ejemplo, si deseas agregar puntos de referencia a lo largo del eje x en el intervalo de 100px de que necesitas utilizar la regla scroll-snap-points-x: repeat(100px).

La propiedad scroll-snap-destination también se agrega al contenedor de desplazamiento. Se define una coordenada en el contenedor donde se encuentra un destino snap. Es en este lugar donde los hijos del contenedor encajarán en su lugar cuando te desplazas.

Puedes utilizar la propiedad scroll-snap-coordinate junto con scroll-snap-destination. Debes añadirlo a los elementos secundarios del contenedor. Se definen las coordenadas de los elementos secundarios, que se alinearán con las coordenadas de destino de tu contenedor de desplazamiento cuando el usuario se desplaza por la pantalla.

Tenga en cuenta que no tienes que utilizar todas las propiedades a la vez. Sólo scroll-snap-type es obligatoria. Junto con esto, puedes definir puntos de referencia individuales o utilizar la combinación de coordenadas de destino.

Ejemplo de código

Aquí hay un fragmento de código de ejemplo para un contenedor de desplazamiento típico, con desplazamiento en dirección vertical y algunas imágenes dentro

HTML

1

2

3

4

5

6

<div>

  <img src='Pizza.png' alt='pizza'>

  <img src='Noodle.png' alt='noodle'>

  <img src='Burger.png' alt='burger'>

  <img src='Juice.png' alt='juice'>

</div>

CSS

1

2

3

4

5

6

7

8

9

div {

  width: 300px;

  height: 300px;

  overflow: auto;

  ...

}

div > img {

  width: 250px;

  height: 150px;

  ...

}



Ahora, añadimos algunos puntos snap de referencia al contenedor de desplazamiento:

1

2

3

4

5

6

div {

  width: 300px;

  overflow: auto;

  scroll-snap-points-y: repeat(150px);

  scroll-snap-type: mandatory;

}



Con esto, puedes ver cómo se ve la salida con los puntos de ajuste CSS añadidos. Observa cada vez que el desplazamiento se detiene mientras la imagen inferior es sólo parcialmente visible, la imagen completa aparece después de que el scrollport se encaje en un punto de encaje encima de él.

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario: