Share
Puede ser difícil para los desarrolladores web garantizar una experiencia de desplazamiento bien controlada, pero afortunadamente un módulo CSS titulado "Scroll Snap" promete ayudar. Se aplicará donde una posición de desplazamiento finalice después de que se haya completado una operación de desplazamiento..
Entre otras cosas, este módulo contiene características para controlar facetas como la panorámica, combinadas con "posiciones de ajuste", y produce una alineación particular del contenido dentro de un contenedor de desplazamiento..
El W3C lanzó recientemente Scroll Snap como una recomendación de candidato que incluye implementaciones y ejemplos bien pensados junto con una sintaxis actualizada. Vamos a bucear en.
Para comprender completamente el poder del ajuste de desplazamiento y cómo funciona, debemos entender su terminología. Hacerlo también ayudará a evitar confusiones cuando se usen estos nuevos términos en este tutorial.
El ajuste de desplazamiento tiene lugar dentro de un "snapport" o "scrollport"; sin embargo, ambos significan lo mismo, y también pueden ser referenciados como un "contenedor de desplazamiento". Esta es la región donde reside su comportamiento de ajuste de desplazamiento como se indica en el diagrama anterior (borde discontinuo exterior). Las intenciones son ayudar a imponer las posiciones de desplazamiento en las que finalizará el puerto de desplazamiento del contenedor de desplazamiento una vez que haya finalizado la operación de desplazamiento..
Cada elemento de este "snapport" se conoce como un "área de snap", y es el objeto o los objetos a los que apuntará. Cada área de snap contiene una "posición de snap" también definida por la "posición de snap" del contenedor de desplazamiento y representada por la línea roja punteada en el diagrama de arriba..
Con la terminología fuera del camino, revisemos algunos ejemplos y exploremos cómo funciona esta funcionalidad en la vida real. Si desea obtener más información sobre otros tipos de casos de uso, puede comenzar con este ejemplo de W3C utilizando una galería de fotos como su caso de demostración, y aquí también. También hay una actualización interesante de la especificación CR de los módulos de agosto de 2017 que establece algunos comportamientos intrigantes que :objetivo debe poseer.
En el momento de escribir este artículo, es mejor ver las siguientes demostraciones con Safari 11, ya que otros navegadores (aunque se considera que son compatibles) en realidad no tienen soporte completo con la nueva sintaxis, a pesar de los datos de Caniuse y las pruebas personales..
El siguiente ejemplo muestra solo las propiedades mínimas requeridas para iniciar el comportamiento de CSS Scroll Snap y no incluye ningún polyfills ya que no pude encontrar un polyfill en funcionamiento que funcionara con la sintaxis más reciente. También es bueno tener en cuenta que cualquier contenedor de desplazamiento requerirá otra propiedad CSS familiar definida como conocida como rebosar.
La demostración anterior aprovecha el eje y como la posición de ajuste, sin embargo, puede hacerlo con la misma facilidad en el eje x. Si no tiene Safari 11 en su sistema, aquí hay una grabación de pantalla que muestra la funcionalidad de demostración en vivo proporcionada anteriormente..
Los paneles se encajan perfectamente. Observe que cuando me desplazo, hay un punto en el que el impulso de desplazamiento se hace cargo y avanza al siguiente cuadro. Bastante rapido eh?
Aquí hay una segunda demostración que muestra el eje y para mostrar imágenes en una forma de galería..
A medida que el usuario se desplaza horizontalmente, el ímpetu aterriza en el centro muerto del área de desplazamiento y la región de área de ajuste independientemente del tamaño de la imagen.
Ahora es el momento de revisar y explicar las propiedades reales con respecto a su sintaxis y valores aceptados.
La especificación actual de Scroll Snap contiene solo cuatro propiedades y cada una desempeña un papel importante. Esas cuatro propiedades son ...
Accentsconagua
scroll-snap-typescroll-snap-alignrelleno de desplazamientomargen de desplazamientoEchemos un vistazo más de cerca y expliquemos qué hace cada uno, dónde se define y qué tipo de valores se aceptan..
scroll-snap-typeEsta propiedad especifica si un contenedor de desplazamiento es de hecho un "contenedor de desplazamiento de desplazamiento" o "snapport", qué tan estrictamente se ajusta y qué ejes se utilizan. Si no se especifica ningún valor de rigurosidad, proximidad El valor se pasa como predeterminado. Esta propiedad también acepta otro valor que ayuda a definir el "eje de ajuste". Esto le permitiría pasar dos valores de su elección (es decir,. scroll-snap-type: y obligatorio). En este caso, estamos indicando la tipo snap Solo ocurre en el eje y y es obligatorio.
Desplazar Snap Axis: X, y, bloquear, en línea, o ambos
X: El contenedor de desplazamiento se ajusta para ajustar posiciones en su eje horizontal solamente.y: El contenedor de desplazamiento se ajusta para ajustar las posiciones en su eje vertical solamente.bloquear: El contenedor de desplazamiento se ajusta para ajustar las posiciones en su eje de bloque solamente.en línea: El contenedor de desplazamiento se ajusta para ajustar las posiciones en su eje en línea solamente.ambos: El contenedor de desplazamiento se ajusta a las posiciones de ajuste en ambos ejes de forma independiente (potencialmente se ajusta a diferentes elementos en cada eje).Estricto de desplazamiento: ninguna, proximidad, y obligatorio
ninguna: Si se especifica en un contenedor de desplazamiento, el contenedor de desplazamiento no debe encajar.proximidad: Si se especifica en un contenedor de desplazamiento, se requiere que el contenedor de desplazamiento se ajuste a una posición de ajuste cuando no haya operaciones de desplazamiento activas. Si existe una posición de encaje accesible, el contenedor de desplazamiento debe ajustarse al finalizar un desplazamiento (si no existe ninguno, no se produce ajuste).obligatorio: Si se especifica en un contenedor de desplazamiento, el contenedor de desplazamiento puede ajustarse a una posición de ajuste al final de un desplazamiento.scroll-snap-alignLa propiedad scroll-snap-align especifica la posición de snap de un contenedor de scroll como una alineación de su área de snap (como el sujeto de alineación) dentro del snapport de su contenedor de snap (como el contenedor de alineación). Los dos valores especifican la alineación de alineación en el eje en línea y el eje de bloque, respectivamente. Si solo se especifica un valor, el segundo valor predeterminado es el mismo valor. Los valores aceptados son ninguna, centrar, comienzo y fin.
En resumen, esta propiedad se define para los hijos posteriores del contenedor de desplazamiento y acepta dos valores. El primer valor representa el eje x, mientras que los segundos representan el eje y; por ejemplo… scroll-snap-align: start center.
ninguna: Este cuadro no define una posición de ajuste en el eje especificado.comienzo: La alineación de inicio del área de ajuste de desplazamiento de este cuadro dentro del contenedor de desplazamiento del contenedor de desplazamiento es una posición de ajuste en el eje especificado.fin: La alineación final del área de ajuste de desplazamiento de este cuadro dentro del puerto de conexión del contenedor de desplazamiento es una posición de ajuste en el eje especificado.centrar: La alineación central del área de ajuste de desplazamiento de este cuadro dentro del puerto de conexión del contenedor de desplazamiento es una posición de ajuste en el eje especificado.relleno de desplazamientoLos valores de relleno de desplazamiento actúan como compensaciones, cuando se declaran, para un contenedor de desplazamiento y reducen la región desplazable que se considera "visible". Esto no tiene efecto en el diseño, el origen del desplazamiento, la posición inicial y si un elemento se considera realmente visible. Hay dos formas, muy parecidas a la propiedad de relleno estándar en CSS, sin embargo, también hay una versión a mano tal como scroll-padding-top, y scroll-padding-bottom, por ejemplo.
margen de desplazamientoEstos valores representan las partes externas cuando se declaran para un contenedor de desplazamiento que define el área de ajuste de desplazamiento utilizada para ajustar elementos al snapport. Funciona y actúa igual que el. margen propiedad, incluyendo la taquigrafía y las variaciones a mano, tales como scroll-margin-top, y scroll-margin-bottom.
Debido a las actualizaciones recientes publicadas en el borrador del editor actual, encontrará una falta de soporte en todos los ámbitos y no polietileno como lo mencioné. También hay una posibilidad de que la propiedad scroll-snap-stop está en riesgo y podría ser abandonado 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 contenedor de ajuste de desplazamiento en este momento. Podría haber otras propiedades que tengan los mismos resultados, y si las encuentra, déjelas en los comentarios a continuación.
Entonces, eso es CSS Scroll snapping desde una visión general alta. ¿Vale la pena? ¿Te resultaría útil? ¿O debería colocarse en los rincones oscuros del universo para no volver a encontrarlo? Deja tus comentarios abajo y, como siempre, feliz codificación.!
