Ocultar ou desativar a rolagem com CSS

Use CSS conforme o conteúdo deva ser recortado, a rolagem deva ser totalmente bloqueada ou apenas a barra deva ser ocultada. overflow: hidden recorta o conteúdo excedente e remove a barra visível; não é apenas uma mudança visual.

Escolha a regra CSS correta

A abreviação overflow controla o excesso horizontal e vertical. Use hidden apenas quando recortar for intencional. Use scrollbar-width: none somente quando a região continuar rolável e identificável. Use overflow-x como proteção depois de corrigir a causa do excesso.

Desativar a rolagem e recortar o excesso

Limite o componente e defina somente o eixo necessário. A barra normal desaparece e o conteúdo fora da caixa é recortado.

<div class="preview-panel"><p>Visible text.</p><p>Extra text is clipped.</p></div>

.preview-panel { max-block-size: 8rem; overflow-y: hidden; border: 1px solid #777; padding: 1rem; }

O resultado não tem barra vertical nem texto além da borda inferior. Use isso somente quando o conteúdo recortado for dispensável ou houver outro controle para revelá-lo. Em um modal, uma classe temporária em html e body pode bloquear a página; teste mouse, toque, teclado e fechamento.

Ocultar a barra e manter a rolagem

Quando os leitores precisam alcançar todo o conteúdo, mantenha overflow-y: auto e oculte a barra com a propriedade padrão e um fallback limitado.

.scroll-area { max-block-size: 10rem; overflow-y: auto; }
@supports (scrollbar-width: none) { .scroll-area { scrollbar-width: none; } }
@supports not (scrollbar-width: none) { .scroll-area::-webkit-scrollbar { display: none; } }

A caixa continua rolando com roda, toque, teclado ou trackpad. ::-webkit-scrollbar não é padrão. Ocultar a barra pode dificultar descobrir a rolagem; ofereça uma indicação visível ou controle alternativo.

Evitar excesso horizontal

Uma barra horizontal geralmente indica erro de layout: mídia com largura fixa, item flex que não encolhe ou texto sem pontos de quebra. Corrija primeiro a causa.

.page-content { max-inline-size: 100%; overflow-x: hidden; }
.page-content img, .page-content video { display: block; max-inline-size: 100%; block-size: auto; }
.page-content code { overflow-wrap: anywhere; }

overflow-x: hidden é apenas uma proteção final. overflow-x: clip também impede rolagem programática e não deve envolver conteúdo interativo necessário.

Não confundir overscroll-behavior

overscroll-behavior: contain controla o encadeamento no limite de um modal rolável. Não oculta a barra nem desativa a rolagem.

Acessibilidade e observações do navegador

Não oculte texto essencial, navegação, campos ou controles sem uma alternativa clara. Verifique o foco do teclado: Tab não deve chegar a conteúdo recortado que não possa ser revelado. overflow: hidden ainda pode mostrar conteúdo focado ou rolado por script, enquanto clip não. scrollbar-gutter: stable reserva espaço, mas não oculta nem desativa a rolagem. Teste telas estreitas e largas, roda, toque, Page Down, setas, Tab e um elemento focado perto da borda.

Antes de publicar, teste os estados normal e restrito em janelas estreitas e largas. Um modal deve restaurar a rolagem da página ao ser fechado, e seu próprio conteúdo precisa continuar acessível. Examine imagens grandes demais, URLs longas, código pré-formatado e filhos flex ou grid em vez de esconder o problema ao recortá-lo.