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.

Isenção de responsabilidade: Este artigo foi gerado usando tradução 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.

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

  • Atualizado em Jun 22, 2026
  • Publicado em Sep 9, 2024
  • 2 minuto(s) lido(s)
Prev Next

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.

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

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.
Artigos relacionados