Una introducción a CSS Scroll Snap Points

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

De desplazamiento Es una de las acciones más realizadas en un sitio web. Los navegadores, a lo largo de los años, han mejorado su rendimiento de desplazamiento para igualar la agilidad de los dedos de los usuarios. Y, los desarrolladores tienen utiliza el desplazamiento de forma creativa para lograr una mejor o una experiencia de usuario fuera de la caja.

Sin embargo, cuando se trata de la correlación entre codificación y desplazamiento, solo JavaScript parecía tener algún control sobre este último. Esto fue así durante un largo período de tiempo, pero con la introducción de los puntos de ajuste de desplazamiento, CSS comenzó a ponerse al día.

Desplazamiento sin puntos de ajuste de desplazamiento

Normalmente, no nos desplazamos muy lento, especialmente en los teléfonos. Cuanto más rápido se desplace, menos control tendrá sobre donde en la pantalla terminarás cuando dejaste de desplazarte.

Imagine que se está desplazando a través de una serie de imágenes de productos en un sitio web, una galería de fotos o diapositivas en línea. Lo que preferirías en tales aplicaciones es Ver todo el producto, foto o diapositiva. cada vez que te desplazas No solo un parte de la imagen del producto, foto o diapositiva.

Por ejemplo, en la siguiente demostración puede ver cuando el usuario deja de desplazarse, solo alrededor de la mitad de la imagen es visible en la parte inferior de la pantalla. Sin embargo, la mayoría de los usuarios preferirían ver la última imagen completamente.

Desplazamiento con puntos de ajuste de desplazamiento

Aquí es donde traemos Puntos de ajuste de desplazamiento CSS. El nombre se explica por sí mismo; Es un estándar CSS que nos permite coloca los objetos en su lugar cuando se desplaza.

Existen cinco propiedades CSS que constituyen esta norma:

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

Soporte del navegador

Las propiedades necesitar -webkit y -Sra prefijos para los navegadores relevantes. A la hora de escribir este artículo, CSS snapshap no es compatible con Chrome y Opera.

Tenga en cuenta que es probable que los agentes de usuario eliminen las últimas cuatro propiedades en un futuro próximo. En lugar, nuevas propiedades, a saber scroll-snap-align, scroll-snap-margin, y scroll-snap-padding, podría ser creado, como se define en esta especificación.

Sin embargo, lo harán tienen un propósito similar como las propiedades anteriores. Actualmente, el antiguo conjunto de propiedades funcionará bien.

Propiedades

Necesitas añade el scroll-snap-type propiedad al contenedor de desplazamiento (el elemento contenedor cuyos hijos se desbordan mientras se desplaza). Especifica la rigor de la acción rápida. Puede tomar tres valores:

1. obligatorio - cuando el desplazamiento haya finalizado, el desplazamiento snap en un punto de snap relevante
2. proximidad - menos estricto que obligatorio; va a Depende del juicio de la UA si el elemento se ajustará en un punto de ajuste dado
3. ninguna - no se realiza ningún ajuste

los scroll-snap-points-x y scroll-snap-points-y propiedades pertenecer al contenedor de desplazamiento, también. Se refieren a puntos en los ejes x e y donde existirán los puntos de ajuste. Su valor es dado por el repetir() función. Por ejemplo, si desea agregar puntos de ajuste a lo largo del eje x en el intervalo de 100px necesitas usar el scroll-snap-points-x: repetir (100px) regla.

los scroll-snap-destination La propiedad también se agrega al contenedor de desplazamiento. Eso define una coordenada en el contenedor donde miente un destino rápido. Es en este destino de snap donde los hijos del contenedor se ajustarán en su lugar cuando se desplacen.

Puedes usar el scroll-snap-coordenada propiedad en conjunción con scroll-snap-destination. Es necesario agregarlo a los elementos secundarios del contenedor. Eso Define las coordenadas de los elementos hijos., que se alineará con las coordenadas de destino de su contenedor de desplazamiento cuando el usuario desplaza la pantalla.

Tenga en cuenta que no tiene que usar todas las propiedades a la vez. Solamente scroll-snap-type es obligatorio. Junto con eso, puede definir puntos de ajuste individuales o usar 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 en el interior.. Da salida a la demo que puedes encontrar al principio de esta publicación..

 div ancho: 300px; altura: 300px; desbordamiento: auto;… div> img ancho: 250 px; altura: 150px;… 

Ahora nosotros añadir algunos puntos de ajuste al contenedor de desplazamiento:

 div ancho: 300px; desbordamiento: auto; scroll-snap-points-y: repetir (150px); scroll-snap-type: obligatorio;  

A continuación, puedes ver cómo se ve la salida con Puntos de ajuste CSS añadidos. Observe que cuando el desplazamiento se detiene mientras la imagen inferior es solo parcialmente visible, el aparece la imagen completa después de que el scrollport se encaje en un punto de ajuste por encima de él.