---
title: "Como adicionar uma barra de rolagem vertical aos blocos 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:58:57Z
published: 2026-06-22T08:58:57Z
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.

# Como adicionar uma barra de rolagem vertical aos blocos de código

Blocos de código no Document360 exibem seu conteúdo completo por padrão, o que significa que um bloco contendo um script longo ou arquivo de configuração pode empurrar tudo abaixo dele bem para baixo na página. Isso torna os artigos mais difíceis de navegar e pode desencorajar os leitores de lerem o conteúdo que vem a seguir. Adicionar uma barra de rolagem vertical resolve isso ao limitar o bloco de código a uma altura de pixel definida, os leitores rolam dentro do próprio bloco e o restante do artigo permanece no lugar.

---

## Quando usar isso

Use essa personalização quando quiser:

- Evite que blocos longos de código dominem o layout da página e obscureçam o conteúdo ao redor.
- Mantenha o comprimento do artigo previsível, especialmente em documentação de referência ou guias de API com múltiplos exemplos de código.
- Melhore a experiência de leitura em páginas onde código e prosa precisam coexistir sem que um sobrecarregue o outro.

---

## Antes de começar

- Você precisa de acesso às **Configurações** () > **site da base de conhecimento** > **personalização do site** > **CSS & JavaScript personalizados** no portal da base de conhecimento.
- Decida a altura do pixel que você quer limitar seus blocos de código antes de começar. `280px` é um padrão razoável que mostra aproximadamente 10–12 linhas de código antes do início da rolagem.

---

## Aplique uma barra de rolagem vertical a todos os artigos

Use essa abordagem para aplicar a barra de rolagem a todos os blocos de código de todo o seu site de base de conhecimento. Selecione o trecho CSS que corresponde à versão do seu site de base de conhecimento.

1. Navegar até **Configurações** (

) > **site da base de conhecimento** > **personalização do site** > **CSS & JavaScript personalizados** no portal da base de conhecimento.
2. No painel de navegação à esquerda, selecione a aba **CSS** e cole o seguinte trecho:

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

1. Substitua o valor de altura pelo tamanho desejado do pixel.
2. Clique **em Salvar**.

> [!NOTE]
> NOTA
> 
> 
> 
> 
> Quando você usa o trecho do site da base de conhecimento 2.0, o ícone superior da barra de rolagem vertical no bloco de código ficará oculto.

### Desfecho

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

---

## Melhores práticas

- **Comece com 280px.** Essa altura mostra cerca de 10 a 12 linhas de código antes da barra de rolagem ativar, o que é contexto suficiente para a maioria dos leitores entender a estrutura do código rapidamente.
- **Teste após salvar.** Abra um artigo com um bloco longo de código no seu site de base de conhecimento e verifique se a barra de rolagem aparece e funciona corretamente antes de publicar.
- **Considere a experiência do leitor junto com a altura.** Alturas muito curtas (abaixo de 150px) podem dificultar o acompanhamento do código. Alturas muito altas (acima de 400px) podem anular o propósito de ter um limite. Ajuste com base no comprimento típico do código em seus artigos.