Inicia sesión


Cambiando el diseño de las barras de scroll con CSS

Una de las recomendaciones fundamentales para una buena usabilidad es no modificar en exceso el diseño de los elementos que forman parte de la interfaz de usuario del sistema operativo, tales como botones, elementos  <select>, las barras de scroll, etc. Hacerlo complica el uso de tu sitio o aplicación web porque el usuario tiene que aprender a reconocerlos.

No obstante, como toda norma tiene sus excepciones, a veces puede ser necesario modificar estos elementos en algunos diseños muy especiales. Firefox 64, publicado en diciembre de 2018, añade entre sus nuevas funcionalidades la posibilidad de cambiar el diseño de las barras de scroll.

En concreto, lo hace a través del estándar CSS Scrollbars Module Level 1, que todavía se encuentra en fase de borrador y no es un estándar oficial. Los tres escenarios para los que se ha pensado este estándar son:

  • Cambiar el color de las barras de scroll para adaptarlas al diseño de la aplicación o sitio web.
  • Mostrar barras de scroll más finas de lo normal cuando un elemento lo requiera.
  • Diseñar barras de scroll totalmente personalizadas si el diseño así lo requiere.
Para ello se han definido dos nuevas propiedades CSS (scrollbar-color y scrollbar-width) que se pueden aplicar a la página entera y también a cualquier elemento que soporte la propiedad overflow de CSS:

Posibles valores de la propiedad scrollbar-color

ValorDescripción
autousa el color por defecto del sistema operativo
darkusa una variante más oscura del color por defecto (escogida automáticamente por el navegador o sistema operativo)
lightusa una variante más clara del color por defecto (escogida automáticamente por el navegador o sistema operativo)
<color>un par de colores CSS siendo el primero el color de fondo del tirador (scrollbar thumb) y siendo el segundo el color de fondo de la barra entera (scrollbar track)

Posibles valores de la propiedad scrollbar-width

ValorDescripción

Descripción 
usa la anchura por defecto del sistema operativo
thinusa una variante más delgada de la anchura por defecto (escogida automáticamente por el navegador o sistema operativo)
noneoculta la barra de scroll completamente (aunque se puede seguir haciendo scroll en el elemento)
<medida> una unidad de medida CSS válida indicando la anchura de la barra de scroll (no se pueden definir diferentes anchuras para el tirador y la barra)
El siguiente ejemplo muestra estas dos propiedades en la práctica:
.selector {
    /* definir una altura pequeña para forzar el scroll */
    height: 100px;
    overflow-y: scroll;
    width: 300px;

    /* cambiar el estilo por defecto de la barra de scroll */
    scrollbar-color: yellow #800080;
    scrollbar-width: 10px;
}

Barra de scroll personalizada con CSS

Si necesitas cambiar el estilo de la barra de scroll en otros navegadores, puedes utilizar estas otras propiedades CSS, aunque no es seguro hacerlo porque no son estándar y en el futuro desaparecerán en favor de scrollbar-color y scrollbar-width.
body::-webkit-scrollbar {
    width: 1em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
La familia de propiedades de -webkit-scrollbar consta de siete pseudo-elementos diferentes que, juntos, comprenden un elemento completo de la interfaz de usuario de la barra de desplazamiento:

  1. :: - webkit-scrollbar aborda el fondo de la barra en sí. Suele estar cubierto por los otros elementos.
  2. :: - webkit-scrollbar-button dirige los botones de dirección en la barra de desplazamiento
  3. :: - webkit-scrollbar-track trata el espacio vacío "debajo" de la barra de progreso
  4. :: - webkit-scrollbar-track-piece es la capa superior de la barra de progreso que no está cubierta por el elemento de desplazamiento que se puede arrastrar (pulgar)
  5. :: - webkit-scrollbar-thumb dirige el elemento de desplazamiento que se puede arrastrar y que cambia de tamaño según el tamaño del elemento desplazable
  6. :: - webkit-scrollbar-corner se dirige a la esquina (generalmente) inferior del elemento desplazable, donde se pueden encontrar dos barras de desplazamiento
  7. :: - webkit-resizer trata el controlador de cambio de tamaño que se puede arrastrar que aparece sobre la esquina de la barra de desplazamiento en la esquina inferior de algunos elementos
Además de estos pseudo-elementos, también hay once clases de pseudo-selector que no son necesarias, pero proporcionan a los diseñadores el poder de diseñar varios estados e interacciones de la IU de la barra de desplazamiento.


  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-02-07
  • Categorias: Diseño Web CSS3 html5 Html WebSite webmasters Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






¿Por qué hablar de sexo es un tabú?

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-10-16
  • Categorias: Estilo Trucos y tips Noticias Tutorial

Como hacer el efecto de desaturacion selectiva con Photoshop

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-10-15
  • Categorias: Adobe PhotoShop Trucos y tips Noticias Tutorial

Decoloración en CSS a través del modo de mezcla

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-10-15
  • Categorias: PhotoShop Diseño Web CSS3 html5 WebSite webmasters Trucos y tips Noticias Tutorial

Como crear una web con el lenguaje HTML

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-08-21
  • Categorias: Diseño Web Lenguajes De Programacion CSS3 html5 Html WebSite webmasters Cursos Noticias Tutorial

Curso intensivo para principiantes en HTML5

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-08-03
  • Categorias: Diseño Web html5 Html WebSite Cursos Tutorial

Mejorar la presencia online de tu empresa: curso para principiantes

  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-06-25
  • Categorias: Marketing SEO Cursos Noticias Tutorial