09.03.2025

Desabilitando a Rolagem Vertical em um Div com overflow: auto

Resposta Rápida

Para ocultar a barra de rolagem vertical em um div com a propriedade overflow: auto, utilize regras CSS específicas para vários navegadores. Nos navegadores baseados em WebKit, como Chrome, Safari e Edge, use ::-webkit-scrollbar { display: none; }. Para o Firefox, aplique a regra scrollbar-width: none;. Essas configurações removerão a visibilidade da barra de rolagem, mantendo a capacidade de rolar usando mouse ou touchscreen.

/* Para navegadores baseados em WebKit */
.div-sem-barra-de-rolagem::-webkit-scrollbar {
  display: none;
}

/* Para Firefox */
.div-sem-barra-de-rolagem {
  scrollbar-width: none;
}

Atribua a classe .div-sem-barra-de-rolagem ao elemento div desejado para ocultar a barra de rolagem sem perder a funcionalidade de rolagem.

Definindo o Modo de Overflow

Se for necessário habilitar a rolagem horizontal sem a rolagem vertical, use overflow-x: auto; overflow-y: hidden;. Essa combinação de propriedades permite a rolagem horizontal enquanto oculta a barra de rolagem vertical.

.div-barra-horizontal {
  overflow-x: auto;
  overflow-y: hidden;
}

Para suportar versões mais antigas de navegadores como IE8, use -ms-overflow-style: scrollbar;. Se houver um espaço em branco na parte inferior do elemento, adicione padding-bottom:

.div-barra-horizontal {
  padding-bottom: 17px;
}

Para Firefox e navegadores baseados em Gecko, a propriedade overflow: -moz-scrollbars-vertical; precisa ser definida.

Gerenciando a Rolagem a Nível do Elemento

Para simplificar o código, você pode usar a abreviação {overflow: auto hidden;}, que inclui a rolagem horizontal e oculta a vertical.

.div-barra-horizontal {
  overflow: auto hidden;
}

Certifique-se de testar em diferentes navegadores para garantir a compatibilidade entre eles e a conformidade com os padrões mais recentes.

Visualização

Considere o div com overflow: auto como um jardim com um sistema de irrigação automática:

| Plantas (div)        | Irrigação (barra de rolagem)  |
| --------------------- | ------------------------------- |
| Overflow: auto 🌿💧   | Conforme necessário 💦          |

Desabilitamos a irrigação vertical:

Desabilitando a irrigação vertical: 💧🔽✖️

Quando há muito conteúdo (o jardim está prosperando):

| Condição das Plantas 🌿 | Irrigação 💦                 |
| ----------------------- | ---------------------------- |
| Dia claro ☀️           | Desativado 🛑                |

Quando falta espaço (overflow horizontal):

| Condição das Plantas 🌿 | Irrigação 💦                 |
| ----------------------- | ---------------------------- |
| Precisa de irrigação 🏜️ | Apenas horizontal ↔️        |

O objetivo é permitir que o jardim floresça sem irrigação excessiva (ocultar a barra de rolagem).

Adaptando Durante o Overflow

Para melhorar a experiência do usuário, utilize media queries e ajuste o comportamento de rolagem com base no dispositivo e na orientação da tela.

@media screen and (max-width: 768px) {
  .div-barra-horizontal {
    overflow-x: scroll;
  }
}

Se o div tiver um tamanho fixo, controle as propriedades de overflow para garantir que a rolagem seja confortável.

.div-tamanho-fixo {
  width: 300px;
  height: 150px;
  overflow-x: auto;
  overflow-y: hidden;
}

Considere as características das interfaces de usuário e seu impacto na percepção do usuário, especialmente em relação à acessibilidade.

Recursos Úteis

1. Propriedade CSS Overflow | CSS-Tricks — guias detalhados sobre como trabalhar com a propriedade overflow em CSS.
2. overflow - CSS: Folhas de Estilos em Cascata | MDN — documentação do MDN sobre a propriedade overflow.
3. Como Ocultar Barras de Rolagem com CSS — um guia do W3Schools sobre como ocultar barras de rolagem.
4. Módulo CSS Overflow Nível 3 — rascunho de trabalho do W3C sobre as especificações de overflow em CSS.
5. html - Ocultar Barra de Rolagem, mas ainda permitir rolagem - Stack Overflow — soluções de usuários para preservar a funcionalidade de rolagem enquanto ocultam a barra de rolagem.
6. Apenas um Momento... — um exemplo ao vivo no CodePen demonstrando o método de ocultar barras de rolagem.
7. Keen - Modelo HTML Multifunção Bootstrap 5 - Keen por KeenThemes — um exemplo do mundo real de como evitar a rolagem da página quando uma janela modal está aberta.

Video

Navigation