Control y personalización del scroll y scrollbars con puro Css

Cómo personalizar scrollbars utilizando sólo Css. Sin recurrir a las propiedades privativas para el scroll. Soportado por todos los navegadores modernos e IE9+

Control y personalización del scroll y scrollbars con puro Css

Por Kseso ✎ 5

Control y personalización del scroll y scrollbars con puro CssEn un viejo artículo del blog hablamos sobre cómo personalizar las scrollbar y de las limitaciones al hacerlo con Css. También tienes allí una recopilación de scripts para ello.

La conclusión, válida a día de hoy, era desaconsejar utilizar las propiedades Css que afectan a esta parte de la UI.

Sin embargo y pese a lo anterior, podemos optar por otro enfoque en Css, la misma que utilizan los scripts y sus librerías: esconder el scroll y reconstruirlo. Hecho lo cual ya podremos manejar todo empleando sólo Css.

Ver Demo a full

See the Pen Pure Css control of Scrolls & Scrollbars by Kseso (@Kseso) on CodePen

Esta demo no deja de ser una variación más de un uso creativo de la técnica de las pestañas o tabs con puro css, basadas en el uso de inputs, la pseudoclase :checked y las labels. Las falsas scrollbars las renderizo con un pseudoelemento de la caja que contiene a las labels y así resulta sencillo animar su desplazamiento.

En estos dos ejemplos el scroll sólo se produce al hacer click sobre la parte libre del scrollbar. Queda pendiente para el próximo año ver de lograr que también funcione por arrastre. Quizás haciendo uso de la técnica de Furoya base de este pen. Eso si no lo consigues tú antes. ¿Te animas a intentarlo y compartirlo en los comentarios?

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: 5

  1. Antes que nada, el invento que mencionaste no es mío; como practicamente todos los ejemplos que publico (para éste y para la comunidad de Sólo Demos) también lo saqué de tu Blog. El mayor (por no decir el único) mérito que podrías achacarme es el de diseccionar el motor y las técnicas de cada uno de tos códigos y aplicarlos a otras situaciones.

    Ahora sí, a lo que venía. Me gustó el método de desplazamiento. Justamente porque tiene un detalle del que carecen muchísimos de los escripts para simular scrollbars : todo el mundo sabe que sirven para desplazar la página, pero muy pocos tienen en cuenta que esas scrollbars contienen un gráfico de posición y tamaño relativos del documento. La barra que está ahora a la derecha (esa derecha →) muestra la altura total de la página en el track, la parte visible en relación al tamaño total en el alto del botón deslizante, y la parte que estamos viendo contra la parte que permanece oculta, ya que ese botón representa la altura del viewport.

    Y tu código contempla esas relaciones. Como corresponde.

    Algún día vamos a comentar por aquí el golazo que sería para el CSS que se pudiera leer un atributo y su valor, para aplicarlo al mismo elemento (o no) pero en alguna propiedad de estilo. Y lo más importante, que no tome la declarada en el código fuente sino la modificada por el usuario o a través de un escript.
    Por ejemplo, leer las variaciones de un 'input type=range' en tiempo real, y aplicar su 'value' al 'top' del documento.

    ResponderEliminar
    Respuestas
    1. Es sorprendente la cantidad de cosas que se pueden hacer con una simple <label>.

      Furoya, me acordé de ese pen que hiciste para redimensionar un elemento con un textarea, y he hecho algo parecido para personalizar las scrollbars con CSS, aunque solo se me ocurrió poner una imagen para la "pista" (track) y el botón (thumb) de la barra: http://cdpn.io/EJbfn

      Saludos y feliz año nuevo.

      Eliminar
  2. Genial el experimento!! como siempre claro, no se porque me sorprendo jejeje. Aunque una duda, a mi no me dejo "arrastrar" el scroll, es problema del navegador? es el ultimo chrome ;( digo por cuestiones de usabilidad debería, no?

    Saludos y Feliz año!!!

    ResponderEliminar
    Respuestas
    1. No, no es ningún fallo de tu navegador.
      Si acaso tuyo por no leer hasta el final (o el final) del artículo xDD =P

      Un saludo

      Eliminar
    2. Tienes toda la razón, mi error, no se como no vi esa parte.

      Eliminar

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