Estilos

Componentes

Formularios

Organismos

Barra de desplazamiento

La barra de desplazamiento se utiliza cuando el contenido de un elemento excede el espacio visible, bien sea a lo ancho o a lo largo.

Uso

Cuándo usar

  • Cuando el contenido de un elemento supera el área visible disponible.
  • Cuando el desplazamiento es necesario para acceder al contenido completo, sin cambiar de vista o pantalla.

Cuándo no usar

  • Cuando el contenido puede mostrarse completo sin necesidad de desplazamiento.
  • Cuando el desplazamiento genera una experiencia confusa o innecesaria (por ejemplo, scroll dentro de scroll sin justificación).

Contexto de uso

Este componente está diseñado para utilizarse dentro de contenedores con espacio limitado, donde el contenido puede variar dinámicamente en cantidad o tamaño. Se muestra únicamente cuando existe contenido desbordado.

La barra de desplazamiento permite mantener la estructura del layout sin afectar la navegación principal de la página, facilitando el acceso al contenido completo dentro de un área definida.

Se recomienda su uso en componentes como tablas, listados extensos, paneles laterales o secciones con dimensiones fijas, priorizando siempre la claridad visual y la comprensión del contenido.

Contexto de uso de scrollbar

Ubicación

Cómo sí usar los íconos
check

La barra de desplazamiento horizontal se debe ubicar al final del contenedor.

Cómo no usar los íconos
check

No debe ubicarse en la parte superior.

Cómo sí usar los íconos
check

La barra de desplazamiento vertical se ubica al lateral derecho del contenedor.

Cómo no usar los íconos
check

No debe ubicarse en otros laterales ni superponerse al contenido.

Recomendación: Evitar combinar barras horizontales y verticales dentro del mismo contenedor, ya que puede dificultar la comprensión del contenido y afectar la experiencia de navegación.

Contenido en esta página

Horizontal

Esto es un título de ejemplo

Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.



Esto es un título de ejemplo

Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.


<div class="responsive-scroll" tabindex="0">
  <div class="horizontal-example">
    <h1>Esto es un título de ejemplo</h1>
    <p class="lead">
      Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.
    </p>
    <br />
    <hr />
    <br />
    <h2>Esto es un título de ejemplo</h2>
    <p>
      Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.
    </p>
  </div>
</div>

Vertical

Esto es un título de ejemplo

Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.



Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.



Esto es un título de ejemplo

Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.



Esto es un título de ejemplo

Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.


<div class="responsive-scroll" tabindex="0">
  <div class="vertical-example">
    <h1>Esto es un título de ejemplo</h1>
    <p class="lead">
      Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.
    </p>
    <br />
    <hr />
    <br />
    <p>
      Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.
    </p>
    <br />
    <hr />
    <br />
    <h2>Esto es un título de ejemplo</h2>
    <p>
      Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.
    </p>
    <br />
    <hr />
    <br />
    <h2>Esto es un título de ejemplo</h2>
    <p>
      Esto es un párrafo de ejemplo para probar el funcionamiento de la barra de desplazamiento. No tiene ningún fin específico, solo sirve de muestra. El ancho del texto es para probar el desplazamiento horizontal, mientras que la lista de cuerpos de contenido consecutivos es para probar el desplazamiento vertical.
    </p>
  </div>
</div>

Variantes

Anatomía

Anatomia del botón
ElementoCarácter
1. Indicador (thumb)Elemento móvil que representa la porción de contenido visible. Su tamaño varía según la cantidad de contenido disponible.
2. Pista (track) Área sobre la cual se desplaza el indicador. Representa el espacio total del contenido.

Variantes

Barra vertical

Se utiliza cuando el contenido de un elemento excede el espacio visible a lo alto.

Ilustración de barra vertical

Barra horizontal

Se utiliza cuando el contenido de un elemento excede el espacio visible a lo ancho.

Ilustración de barra horizontal

Contenido en esta página

Navegación alternativa

Si el contenedor requiere desplazamiento, puede habilitarse foco con tabindex="0" para permitir desplazamiento con teclado.

Se recomienda utilizarlo únicamente cuando el contenedor no contenga elementos interactivos.

FLECHASPAGE UP/PAGE DOWNINICIO/FINESPACIO

El desplazamiento del contenido puede realizarse mediante:

  • Flechas del teclado.
  • Page Up / Page Down.
  • Inicio / Fin.
  • Barra espaciadora (según navegador).

El orden de foco no debe verse alterado por la presencia del scroll.

Navegacion alternativa del botón

Etiquetado descriptivo

No se debe aplicar semántica ARIA a la barra de desplazamiento.

Recomendaciones:

  • No utilizar role="scrollbar".
  • No utilizar role="progressbar".
  • No agregar atributos ARIA para anunciar el desplazamiento.

La navegación y el desplazamiento deben resolverse mediante el comportamiento nativo del navegador.

Criterios WCAG aplicados

Success Criterion 1.3.1 Info and Relationships (Level A)

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

Success Criterion 1.4.11 Non-Text Contrast (Level AA)

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

Success Criterion 2.1.1 Keyboard (Level A)

Todas las funcionalidades del contenido se puede operar a través de una interfaz de teclado.

Success Criterion 2.4.3 Focus Order (Level A)

Si una página web puede navegarse de forma secuencial y las secuencias de navegación afectan el significado o la operación, los componentes enfocables reciben el foco en un orden que preserve el significado y la operabilidad.

Success Criterion 2.4.7 Focus Visible (Level AA)

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible.

Contenido en esta página

Navegación de pie de página