Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

CSS Desplazamiento Snap: ¿Qué es? ¿Lo Necesitamos?

by
Read Time:6 minsLanguages:

Spanish (Español) translation by Richter Domagas (you can also view the original English article)

Puede ser difícil para los desarrolladores web garantizar una experiencia de desplazamiento buena controlada, pero por suerte un módulo CSS estoy titulado "Desplazamiento Snap" se compromete a ayudar. Harán cumplir en una posición de desplazamiento termina ha finalizado una operación de desplazamiento.

Entre otras cosas, este módulo contiene funciones para controlar aspectos como desplazamiento, combinado con "posiciones snap" y produce una particular alineación del contenido dentro de un contenedor desplazable.

El W3C publicó recientemente Desplazamiento Snap como una recomendación de candidatos que incluye implementaciones bien pensadas y ejemplos juntos con sintaxis actualizado. Zambullámonos.

Desplazamiento, Ajuste de Terminología

Para entender completamente el poder de ajuste de desplazamiento y cómo funciona, necesitamos entender su terminología. Esto también ayudará a evitar la confusión cuando se usan estos términos nuevos a lo largo de este tutorial.

Scroll Snapping TerminologyScroll Snapping TerminologyScroll Snapping Terminology

Complemento de desplazamiento ocurre dentro de un "snapport" o "scrollport"; sin embargo, ambos significan lo mismo y también pueden hacer referencia como un "recipiente de desplazamiento". Esta es la región donde el comportamiento de ajuste de desplazamiento reside como se indica en el diagrama arriba (borde discontinuo exterior). Las intenciones son ayudar a reforzar las posiciones de desplazamiento scrollport de un recipiente de desplazamiento terminará en ha finalizado una operación de desplazamiento.

Cada elemento de este "snapport" se conoce como un "área de snap" y es el objeto que va apuntando. Cada zona del  complemento contiene una "posición de snap" también definido por la "posición de snap" del recipiente de desplazamiento y representada por la línea roja punteada en el diagrama anterior.

Con la terminología del camino vamos a revisar algunos ejemplos y explorar cómo funciona esta funcionalidad en la vida real. Si quieres leer más sobre otros tipos de casos de uso, usted puede comenzar con este ejemplo del W3C mediante una galería de fotos como su caso de demostración y aquí también. También hay una interesante actualización de la Especificación de Módulos agosto de 2017 CR que declara algunos comportamientos intrigantes que :target debe poseer.

Demos de Snap Desplazamiento

En el momento de escribir esto es mejor visualizar las siguientes demos con Safari 11 como otros navegadores (aunque señaló apoyar) realmente no tiene soporte completo con la nueva sintaxis, a pesar de datos desde caniuse y pruebas personales.

El ejemplo siguiente muestra sólo las propiedades muy mínimas necesaria para iniciar el Snap de Desplazamiento de CSS un comportamiento y no incluye ningún polyfills como era incapaz de encontrar un polyfill de trabajo que funcionaban con la sintaxis más recientemente publicada. También es bueno tener en cuenta que cualquier recipiente de desplazamiento requerirá de otra propiedad familiar definida conocida como overflow.

La demo anterior aprovecha el eje y la posición de snap sin embargo, podría hacerlo fácilmente en el eje x. Si no tienes Safari 11 su sistema aquí es una grabación de pantalla que muestra la funcionalidad de la demostración en vivo anteriormente indicada.

Los paneles de encajen perfectamente. Aviso a medida que desplaza hay un punto donde el impulso de desplazamiento toma el relevo y avanza a la siguiente caja. ¿Bastante rápido eh?

Aquí le damos una segunda demo mostrando el eje y para mostrar imágenes en una galería al estilo modo.

Como el usuario se desplaza horizontalmente, el impulso tierras centro muerto de la zona scrollport y snap sin importar el tamaño de la imagen.

Propiedades de Snap Desplazamiento y Sintaxis

Ahora es el momento para revisar y explicar las propiedades reales en cuanto a su sintaxis y valores aceptados.

La especificación actual de Desplazamiento Snap contiene sólo cuatro propiedades y cada uno juega un papel importante. Estas cuatro propiedades son...

  • scroll-snap-type
  • scroll-snap-align
  • scroll-padding
  • scroll-margin

Echa un vistazo y explicar lo que hace cada uno, donde se define y qué tipo de valores es aceptado.

scroll-snap-type

Esta propiedad especifica si un recipiente de desplazamiento es en realidad un "contenedor de desplazamiento snap" o "snapport" cómo estrictamente que encaje y que ejes se utilizan. Si no se especifica ningún valor de rigor, se pasa el valor de la proximity como valor predeterminado. Este establecimiento también acepta otro valor que ayuda a definir el "eje snap". Esto le permitirá pasar en dos valores de su elección (es decir scroll-snap-type: y mandatory). En este caso, estamos indicando el snap-type sólo se produce en el y-eje y es mandatory.

Scroll Snap Axis: xyblockinline, o both

  • x: El recipiente de desplazamiento se encaja a la presión para ajustar posiciones en su eje horizontal solamente.
  • y: El recipiente de desplazamiento se encaja a la presión para ajustar posiciones en su eje vertical solamente.
  • block: El recipiente de desplazamiento se encaja a la presión para ajustar posiciones en su eje de bloque solamente.
  • inline: El recipiente de desplazamiento se encaja a la presión para ajustar posiciones en su eje en línea solamente.
  • both: El recipiente de desplazamiento se encaja a la presión para ajustar posiciones en ambos de sus ejes de forma independiente (potencialmente encajarse a la presión a distintos elementos en cada eje).

Scroll Snap Strictnessnoneproximity, y mandatory

  • none: Si en un recipiente de desplazamiento, el recipiente de desplazamiento no debe ajustar.
  • proximity: Si en un recipiente de desplazamiento, el recipiente de desplazamiento se requiere para ser ajustados a una posición de presión cuando no hay ninguna operación de desplazamiento activo. Si existe una posición de snap  puede llegar al recipiente de desplazamiento debe encajar en la terminación de un desplazamiento (si no existe entonces ningún ajuste ocurre).
  • mandatory: Si se especifica en un recipiente de desplazamiento, el recipiente de desplazamiento puede ajustar a una posición de snap en la terminación de un pergamino.

scroll-snap-align

La propiedad scroll-snap-align especifica posición de snap de contenedor desplazamiento como un alineamiento de su área de snap (como el tema de la alineación) en snapport del contenedor de su snap (como el contenedor de alineación). Los dos valores especificarán la alineación de encajarse a la presión en la línea y bloque eje, respectivamente. Si sólo se especifica un valor, el segundo valor por defecto con el mismo valor. Aceptados valores son nonecenter,   start y end.

En resumen, esta propiedad se define para los hijos posteriores del recipiente de desplazamiento y acepta dos valores. El primer valor representa el eje x mientras que los segundos representa el eje y; por ejemplo... scroll-snap-align: start center.

  • none: Este cuadro no define una posición de presión en el eje especificado.
  • start: Inicio de área de snap de desplazamiento de la caja en snapport del recipiente de desplazamiento es una posición de presión en el eje especificado.
  • end: Final de área de snap de desplazamiento de la caja en snapport del recipiente de desplazamiento es una posición de presión en el eje especificado.
  • center: Centro de área de snap de desplazamiento de la caja en snapport del recipiente de desplazamiento es una posición de presión en el eje especificado.

scroll-padding

Los valores de desplazamiento-acolchado actúan como compensa, cuando declaró, para un recipiente de desplazamiento y reducir la región desplazable que se considera "visible". Esto no tiene ningún efecto en la disposición, origen del desplazamiento, posición inicial, y si un elemento se considera realmente visible. Hay dos formas, al igual que el estándar acolchado propiedad en CSS, sin embargo también hay una versión de mano como scroll-padding-top, y scroll-padding-bottom, por ejemplo.

scroll-margin

Estos valore representan cordones cocer cuando declaró para un recipiente de desplazamiento define el área de presión de desplazamiento utilizado para ajustar elementos al snapport. Trabaja y actúa igual que la propiedad de  margin, incluyendo las variaciones taquigrafía y mano como scroll-margin-top y scroll-margin-bottom.

Pensamientos de Despedida

Debido a actualizaciones recientes publicadas borrador del editor actual encontrará una falta de apoyo a través de la Junta y no polyfill como ya he mencionado. También es una oportunidad que la propiedad scroll-snap-stop en riesgo y podría caer durante el período de CR. También descubrí durante mi investigación y experimentación que min-height no funciona cuando se define en el rollo de ajuste envase en este momento. Allí podría ser otras propiedades que tienen los mismos resultados, y si encuentras que estos por favor dejan en los comentarios.

Así, es desplazamiento CSS ajustar desde una visión alta. ¿Vale? ¿Le parece útil? ¿O deben ser colocadas en los rincones oscuros del universo nunca para ser encontrado otra vez? Deja tu comentario el abajo y, como siempre, feliz codificación!

Recursos

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.