---
title: "Wie man eine vertikale Scrollleiste zu den Codeblöcken fügt"
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:43:25Z
published: 2026-06-22T08:43:25Z
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.

# Wie man eine vertikale Scrollleiste zu den Codeblöcken fügt

Codeblöcke in Document360 zeigen standardmäßig ihren vollständigen Inhalt an, was bedeutet, dass ein Block mit einem langen Skript oder einer Konfigurationsdatei alles darunter weit nach unten auf der Seite verschieben kann. Das macht Artikel schwerer zu navigieren und kann Leser davon abhalten, die folgenden Inhalte zu lesen. Das Hinzufügen einer vertikalen Scrollleiste behebt dies, indem der Codeblock auf eine festgelegte Pixelgröße begrenzt wird, die Leser innerhalb des Blocks selbst scrollen und der Rest des Artikels an Ort und Stelle bleibt.

---

## Wann sollte man das verwenden

Nutzen Sie diese Anpassung, wenn Sie möchten:

- Verhindern Sie, dass lange Codeblöcke das Seitenlayout dominieren und umliegende Inhalte verdecken.
- Halte die Artikellänge vorhersehbar, besonders in Referenzdokumentationen oder API-Anleitungen mit mehreren Codebeispielen.
- Verbessern Sie das Leseerlebnis auf Seiten, auf denen Code und Prosa koexistieren müssen, ohne dass das eine das andere überlagert.

---

## Bevor du anfängst

- Sie benötigen Zugriff auf **Einstellungen** () > **Knowledge Base-Website** > **Site-Anpassung** > **benutzerdefiniertes CSS und JavaScript** im Knowledge Base-Portal.
- Entscheiden Sie sich vorher für die Pixelhöhe, auf die Sie Ihre Codeblöcke begrenzen möchten. `280px` ist ein vernünftiger Standard, der etwa 10–12 Codezeilen anzeigt, bevor das Scrollen beginnt.

---

## Wenden Sie allen Artikeln eine vertikale Scrollleiste an

Nutzen Sie diesen Ansatz, um die Scrollleiste auf jeden Codeblock auf Ihrer gesamten Wissensdatenbank anzuwenden. Wählen Sie den CSS-Ausschnitt, der zu Ihrer Version Ihrer Wissensdatenbank passt.

1. Navigiere zu **den Einstellungen** (

) > **Wissensdatenbank-Website** > **Site-Anpassung** > **benutzerdefiniertes CSS und JavaScript** im Knowledge Base-Portal.
2. Wählen Sie im linken Navigationsfenster den **CSS-Tab** aus und fügen Sie folgenden Ausschnitt ein:

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

1. Ersetze den Höhenwert durch die gewünschte Pixelgröße.
2. Klicken **Sie auf Speichern**.

> [!NOTE]
> HINWEIS
> 
> 
> 
> 
> Wenn du den Knowledge Base Site 2.0-Ausschnitt verwendest, ist das obere Symbol der vertikalen Scrollleiste im Codeblock versteckt.

### Ergebnis

![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)

---

## Best Practices

- **Fang mit 280px an.** Diese Höhe zeigt etwa 10–12 Codezeilen, bevor die Scrollleiste aktiviert wird, was für die meisten Leser ausreichend Kontext ist, um die Codestruktur auf einen Blick zu verstehen.
- **Test nach dem Speichern.** Öffne einen Artikel mit einem langen Codeblock auf deiner Wissensdatenbank und prüfe, ob die Scrollleiste korrekt erscheint und funktioniert, bevor du sie veröffentlichst.
- **Betrachte die Lesererfahrung zusammen mit der Körpergröße.** Sehr niedrige Höhen (unter 150 px) können den Code schwer verständlich machen. Sehr hohe Höhen (über 400px) könnten den Sinn einer Kappe zunichtemachen. Passen Sie die typische Länge des Codes in Ihren Artikeln an.