Propriedade Overscroll Behavior
Última atualização: 2026-09-13
overscroll-behavior Propriedade Overscroll Behavior
A propriedade overscroll-behavior controla o que acontece quando um contêiner de rolagem atinge seu limite — por exemplo, se o evento de rolagem passa para o contêiner pai (scroll chaining) ou dispara um comportamento padrão do navegador como atualização da página ou navegação no histórico. É uma propriedade essencial para resolver o problema de penetração de rolagem em contêineres de rolagem aninhados.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
overscroll-behavior: contain | none | auto;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
contain | none | auto | Palavra-chave | O comportamento no limite da rolagem |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overscroll-behavior | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： contain bloqueia o scroll chaining, então rolar até o limite dentro do contêiner não move mais o contêiner externo; none também bloqueia comportamentos padrão de limite do navegador, como o rubber-banding do iOS.
Dica： Para modais, barras laterais e painéis flutuantes com rolagem aninhada, recomenda-se overscroll-behavior: contain para que os usuários não rolem acidentalmente a página atrás.
❓ Perguntas Frequentes
QQual é a diferença entre overscroll-behavior e touch-action?
Aoverscroll-behavior controla como a cadeia de rolagem se propaga após atingir o limite — se move o contêiner externo ou dispara comportamentos do navegador como atualização e rebote. touch-action controla como o navegador interpreta gestos de toque — se o pan, o zoom ou o zoom de toque duplo são permitidos. A primeira foca no que acontece ao rolar além da borda; a segunda foca como os gestos são interpretados. Elas resolvem problemas diferentes.
QPor que a página ainda rola mesmo com overscroll-behavior: contain?
Aoverscroll-behavior atua apenas no scroll chaining: quando um contêiner interno atinge seu limite e tenta passar a rolagem para a camada externa, contain intercepta essa passagem. Se o evento de rolagem nunca vem do contêiner de rolagem, ou a página externa está sendo rolada pelo dedo no mobile, contain não faz nada. Confirme também se a propriedade está no contêiner que realmente rola.
QO que é scroll chaining e como impedir a penetração de rolagem?
AScroll chaining significa que, após um elemento interno rolar até seu limite, a rolagem continua e passa para o pai ou a página — a clássica penetração em que rolar dentro de um modal também rola a página. Defina overscroll-behavior: contain no contêiner de conteúdo do modal, barra lateral ou gaveta para interceptar a passagem; none também desativa padrões do navegador como pull-to-refresh e rebote.
QQual é a relação entre overscroll-behavior e overscroll-behavior-x/y?
Aoverscroll-behavior é o shorthand que define o comportamento de limite para ambos os eixos de uma vez; overscroll-behavior-x e overscroll-behavior-y são as propriedades completas para as direções horizontal e vertical. Por exemplo, para bloquear o scroll chaining apenas na vertical, escreva overscroll-behavior-y: contain.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
