soy Kseso y esto EsCSS

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?

avatar del Editor del blog

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