---
title: "How to add a vertical scrollbar to the code blocks"
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-03-10T04:32:18Z
published: 2026-03-10T04:32:18Z
---

> ## 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.

# How to add a vertical scrollbar to the code blocks

When you have long codes inside the code blocks, the code block consumes more space and increases the article length. It is good to have a vertical scrollbar for the code blocks when their size increases more than a specific pixel. Check the solution below to implement this on your knowledge base site.

---

### Solution

#### To apply vertical scrollbar in specific articles within Knowledge base Site 1.0 projects

1. Add the below tag in your article for which you want a scrollbar in code blocks.

```xml
<div class="scroll">
```

1. Navigate to **Settings** (<nor class="fa-solid fa-gear" data-tomark-pass=""></nor>) > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.

![Site customization options including CSS, JavaScript, and theme settings for a knowledge base.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&amp;%20js.png)
2. From the left navigation pane, click on the **CSS** tab and paste the following CSS snippet:

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

1. Enter the desired pixel size.
2. Click **Save**on the top right.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1766998531921.png)

### Outcome

![3_Screenshot-vertical_scrollbar_outcome.png](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1727784856290.png)

---

#### To apply vertical scrollbar in all articles

1. Navigate to **Settings** (<nor class="fa-solid fa-gear" data-tomark-pass=""></nor>) > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.
2. From the left navigation pane, click on the **CSS** tab and paste the following CSS snippet:

Knowledge base site 1.0Knowledge base site 2.0

```css
.code-toolbar pre {
max-height: 300px;
}
```

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

1. Enter the desired pixel size.
2. Click **Save**.

> [!NOTE]
> ** NOTE
> 
> When you use the above snippet, the top icon of the vertical scrollbar in the code block would be hidden.

### Outcome

![3_Screenshot-vertical_scrollbar_outcome.png](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/3_Screenshot-vertical_scrollbar_outcome%281%29.png)