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.

Descargo de responsabilidad: Este artículo se generó mediante traducción automática.

As of 22 Nov 2025, the Markdown editor has been upgraded from v1.4.10 to v3.2.2. The toolbar, layout, icons, and editor structure remain unchanged.

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

  • Actualizado en Jun 22, 2026
  • Publicado el Sep 9, 2024
  • 2 minuto(s) leído(s)
Prev Next

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.

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

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.
Artículos relacionados