---
title: "Cómo añadir una barra de desplazamiento vertical a los bloques de código"
slug: "how-to-add-a-vertical-scrollbar-to-the-code-blocks"
description: "When you have long codes inside the code blocks, the code block will consume more space and increases the article length. It is good to have a vertical scrollbar to the code blocks when its size increases more than a specific pixel."
tags: ["Customization"]
updated: 2026-06-22T08:48:10Z
published: 2026-06-22T08:48:10Z
canonical: "docs.document360.com/how-to-add-a-vertical-scrollbar-to-the-code-blocks"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cómo añadir una barra de desplazamiento vertical a los bloques de código

Los bloques de código en Document360 muestran su contenido completo por defecto, lo que significa que un bloque que contiene un script largo o un archivo de configuración puede empujar todo lo que está debajo muy abajo en la página. Esto dificulta la navegación de los artículos y puede desanimar a los lectores a leer el contenido que sigue. Añadir una barra de desplazamiento vertical soluciona esto limitando el bloque de código a una altura fija de píxel, los lectores desplazan dentro del propio bloque y el resto del artículo permanece en su sitio.

---

## Cuándo usar esto

Utiliza esta personalización cuando quieras:

- Evitar que los bloques de código largos dominen el diseño de la página y oculten el contenido circundante.
- Mantén la longitud del artículo predecible, especialmente en la documentación de referencia o en guías de API con múltiples ejemplos de código.
- Mejora la experiencia de lectura en páginas donde el código y la prosa deben coexistir sin que uno abrube al otro.

---

## Antes de que empieces

- Necesitas acceso a **Configuración** () > **sitio de la base de conocimientos** > **personalización del sitio** > **CSS y JavaScript personalizados** en el portal de la base de conocimiento.
- Decide la altura de píxeles a la que quieres limitar tus bloques de código antes de empezar. `280px` es un valor por defecto razonable que muestra aproximadamente entre 10 y 12 líneas de código antes de que comience el desplazamiento.

---

## Aplica una barra de desplazamiento vertical a todos los artículos

Utiliza este enfoque para aplicar la barra de desplazamiento a cada bloque de código de todo tu sitio de base de conocimientos. Selecciona el fragmento de CSS que coincida con la versión de tu sitio de base de conocimientos.

1. Navega a **Configuración** (

) > **Sitio de la base de conocimiento** > **Personalización del sitio** > **CSS y JavaScript personalizados** en el portal de la base de conocimiento.
2. Desde el panel de navegación izquierdo, selecciona la pestaña **CSS** y pega el siguiente fragmento:

```
article .code-toolbar {
    height: 280px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
```

1. Sustituye el valor de altura por el tamaño de píxel que deseas.
2. Haz clic **en Guardar**.

> [!NOTE]
> NOTA
> 
> 
> 
> 
> Cuando usas el fragmento de la base de conocimientos web 2.0, el icono superior de la barra de desplazamiento vertical en el bloque de código quedará oculto.

### Resultado

![Code block with vertical scrollbar applied to all articles across the knowledge base site](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/3_Screenshot-vertical_scrollbar_outcome%281%29.png)

---

## Mejores prácticas

- **Empieza con 280px.** Esta altura muestra aproximadamente entre 10 y 12 líneas de código antes de que se active la barra de desplazamiento, lo que es suficiente contexto para que la mayoría de los lectores entiendan la estructura del código de un vistazo.
- **Prueba después de guardar.** Abre un artículo con un bloque de código largo en tu base de conocimientos y verifica que la barra de desplazamiento aparezca y funcione correctamente antes de publicarlo.
- **Considera la experiencia del lector junto con la estatura.** Alturas muy cortas (menos de 150px) pueden dificultar seguir el código. Alturas muy altas (más de 400px) pueden anular el propósito de tener un límite. Ajusta según la longitud típica del código en tus artículos.