CSS Scroll Snap Points: control del desplazamiento vía Css

Actualizado: Sept 2015
La propuesta al W3c para el control del desplazamiento con Css (CSS Scroll Snap Points). Explicación, demo y artículos relacionados.

CSS Scroll Snap Points: control del desplazamiento vía Css

Por Kseso ✎ 2

CSS Scroll Snap Points: control del desplazamiento vía CssUna de las cuestiones no abordadas hasta le fecha por Css en lo relativo a la Interfaz de Usuario (UI) era el control del scroll o desplazamiento. Desplazamiento realizado por el usuario, ya sea mediante hardware y algún identificador en pantalla o sin ellos en dispositivos "táctiles".

Decía "cuestión no abordada" porque hace escasas fechas (28 de Octubre de 2013) ha sido publicado por el W3c el documento "CSS Scroll Snap Points Module Level 1".

Este documento está marcado como Editor's Draft pues es una propuesta para su discusión realizada por Microsoft.
En la actualidad (2015) ya forma parte del corpus del W3c: CSS Scroll Snap Points Module Level 1 como First Public Working Draft

Básicamente, este documento introduce dos 3 propiedades: qué tipo de control del desplazamiento debe hacerse: scroll-snap-type, cuáles son los puntos de referencia para el desplazamiento, bien en el eje X scroll-snap-points-x o el Y: scroll-snap-points-y y la tercera scroll-snap-coordinate para indicar el punto referente del contenedor en el que se sitúa cada ítem.

La propiedad scroll-snap-type

Esta propiedad indica si qué tipo de control se realiza sobre el desplazamiento. Los valores posibles son:
none Se ignoran los puntos de control (snap point) si los hubiera.
mandatory: al hacer hacer el desplazamiento se debe ir exáctamente al punto de control indicado.
proximity: menor precisión que el anterior. Se desplaza a las proximidades del punto de control (snap points).

Las propiedades scroll-snap-points-x - scroll-snap-points-y

Es la propiedad mediante la cual se indican los puntos de control (snap points) en el desplazamiento y el eje.

Admite dos formas de declarar los valores, mediante una serie de ellos (relación) o por un intervalo:
snapList(punto1,punto2,…puntoN): cada uno de los snap points al scrolear.
snapInterval(inicial, intervalo): define el punto inicial para los puntos de control y el valor de desplazamiento (distancia) de uno al siguiente.

Un ejemplo, por favor

Lo anterior aplicado a un ejemplo, tomado del documento del consorcio. Tengamos una galería formada por una serie de imágenes colocadas en horizontal (eje X) tal que así:

<div class="photoGallery"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> <img src="img4.jpg"> <img src="img5.jpg"> </div>

Y queremos marcar como puntos de control el inicio de cada una de las imágenes. Así que declaramos el siguiente Css:

img { width:500px; } .photoGallery { width: 500px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scroll-snap-points-x: snapInterval(0px,100%); scroll-snap-type: mandatory; }

El resultado de todo lo anterior sería el de la imagen de abajo, también sacada de la propuesta del W3c:

CSS Scroll Snap Points

Propiedad scroll-snap-coordinate

Esta propiedad desapareció con la el desarrollo del documento.
En la actualidad (Enero 2017) el documento tiene el estatus de CR y está estructurado en propiedades que aplican al contenedor que genera el scroll y propiedades que aplican a sus ítems.
Para estar al día ver "CSS Scroll Snap Module Level 1"

La propiedad scroll-snap-coordinate se ha de declarar a los ítems, a diferencia de las anteriores que lo son en el contenedor general.

Mediante esta propiedad indicamos las coordenadas del contenedor con el que se alineará el ítem. Su sintaxis es la siguiente:

scroll-snap-coordinate: none | < position >;

Volvamos al ejemplo del código Html anterior de nuestra galería. Supongamos que .photoGallery tiene una anchura de 500px y cada ítem (las imágenes) de 240px. Esto hace que en cada momento se muestren 2 imágenes de la galería.

Para controlar en qué punto de la ventana de la galería (a la izquierda, centro, derecha...) ubicamos la imagen está la propiedad scroll-snap-coordinate:

ESTAS PROPIEDADES HAN DESAPARECIDO EN EL DOC CR /* Posicionada en el centro */ img { scroll-snap-coordinate: 50% 50%; } /*Colocada a la izquierda */ img { scroll-snap-coordinate: 0 50%; }

Para comprenderlo, mira el siguiente pen en navegadores que le den soporte (firefox por ejemplo):

See the Pen zvYpbz by Kseso (@Kseso) on CodePen.

Estado actual del CSS Scroll Snap Points 09/2015

En estos momentos sólo IE en algunas de sus versiones y con prefijo privativo: IE10 en dispositivos táctiles e IE11 además de los táctiles también en los que soportan desplazamiento mediante control gestual (trackpad gestures), por ratón, por teclado, incluyendo el desplazamiento mediante click en la barra de scroll.

IE: desde IE10 pero con su sintaxis particular (por no variar)
Firefox Implementada desde la versión 39 estable.
Chrome Parece que está en ello al igual que Safari.

Como siempre en estos casos, lo mejor es consultar el estado actual en canIuse.

Más información

  1. El documento del w3c: CSS Scroll Snap Points Module Level 1
  2. Native CSS Scroll Snap Points Artículo y demos del 1 de Julio 2015 en gospodarets.com
  3. La propiedad scroll-snap-type por MIcrosoft. En este enlace, a la izquierda, tienes los links al resto de propiedades del grupo.
  4. Artículo de Dstorey: Setting native-like scrolling offsets in CSS with Scrolling Snap Points. Incluye galería de ejemplo para que lo veas.
  5. Tabla de soporte a CSS Scroll Snap Point
  6. Otro artículo aobre CSS Scroll Snap Points [ing]

Artículo publicado originalmente el 18 de Noviembre de 2013.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 2

  1. umhh no funciona en firefox 40 (creo)

    ResponderEliminar
    Respuestas
    1. Hola Daniel
      Funcionar sí funciona. Ahí realice algún pequeño ajuste a la demo.
      Sólo tienes que desplazar ligéramente el scroll con el ratón para notar que dependiendo de cuánto lo muevas retorna a su posición previa (si es poco el espacio) y si es una longitud suficiente "salta" a la siguiente.
      También puedes hacer la prueba pinchando las puntas izquierda y derecha para ver que el pasa un ítem completo.

      Pero date cuenta que es todo demasiado reciente y posíblemente se junten alguna particularidad del navegador y algún detalle que con las prisas yo no he terminado ni de comprender ni de afinar en la demo.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap