Desativar pull to refresh com overscroll-behavior no CSS

Para desativar pull to refresh, defina overscroll-behavior-y: contain no elemento que rola a página, geralmente body ou html:

body {
  overscroll-behavior-y: contain;
}

Esse é o exemplo de uma linha do artigo do Chrome sobre a propriedade, que diz que ela desativa o pull-to-refresh mas mantém o brilho de overscroll (Chrome for Developers, 2017). A propriedade controla o que acontece quando a rolagem chega à borda de um contêiner de rolagem, e o MDN lista eliminar o comportamento do navegador tipo «atualizar ao puxar» como um de seus usos (MDN, outubro de 2026). O suporte não é uniforme: o MDN marca overscroll-behavior como não Baseline, e o suporte do Safari é parcial, então teste nos celulares que você atende.

O que o overscroll-behavior faz

overscroll-behavior decide se uma rolagem que chega a um limite continua no pai, e se o navegador mostra os próprios efeitos de overscroll. Segundo o MDN, por padrão os navegadores mobile tendem a mostrar um efeito de quique, ou até uma recarga da página, quando se chega ao topo ou ao fim de uma página ou área de rolagem. A propriedade tem quatro palavras-chave (definições do MDN):

O encadeamento de rolagem é o comportamento padrão do navegador de passar a rolagem para o pai quando um filho chega ao limite: o exemplo do Chrome é uma gaveta de aplicativos que chega ao fim e faz a página por trás começar a rolar. overscroll-behavior é um atalho para overscroll-behavior-x e overscroll-behavior-y, e duas palavras-chave definem x e depois y, nessa ordem.

contain ou none para pull to refresh

Use contain quando quiser impedir a atualização mas manter o retorno visual da plataforma, e none quando quiser remover também o efeito. O artigo do Chrome descreve contain como algo que impede o encadeamento de rolagem enquanto efeitos locais, como o brilho de overscroll do Android, continuam aparecendo, e none como a mesma coisa com os efeitos removidos. Para pull to refresh na própria página:

/* bloqueia pull to refresh, mantém o brilho */
body { overscroll-behavior-y: contain; }

/* remove também o brilho e o efeito elástico */
body { overscroll-behavior-y: none; }

O artigo do Chrome também observa que, em html, contain impede a navegação por overscroll, e que um none horizontal deveria bloquear a navegação por deslize para a esquerda e para a direita, o que o Chrome ainda não tinha implementado quando o artigo foi escrito, em 2017. Verifique o comportamento atual antes de depender disso para gestos de deslize.

Desativar pull to refresh remove um gesto que as pessoas usam para recarregar. Se a página mostra dados ao vivo, ofereça aos usuários um botão de atualizar ou um gesto próprio de atualização, porque o do navegador vai sumir.

Corpo ou contêiner de rolagem

Coloque a propriedade no elemento que rola, porque ela só se aplica a contêineres de rolagem. Para a página, é o elemento que define a área de visualização, html ou body. Para um painel interno, uma gaveta ou uma lista de conversas, defina-a nesse painel:

.chat-list {
  height: 12em;
  overflow: auto;
  overscroll-behavior: contain;
}

Isso impede que a página por trás do painel role quando o usuário chega ao fim da lista; o exemplo do MDN usa o mesmo padrão para diálogos. Dois detalhes do MDN:

• Um contêiner de rolagem sem overflow rolável, como um elemento com overflow: hidden, está sempre no limite de rolagem; então um overscroll-behavior diferente do padrão nele bloqueia o encadeamento para os ancestrais. O MDN diz que isso pode impedir a rolagem do fundo enquanto um diálogo ou uma sobreposição estiver aberto.
• Um <iframe> não é um contêiner de rolagem, então a propriedade não tem efeito sobre o elemento iframe. Para controlar o encadeamento a partir de dentro de um iframe, defina-a em html e em body do documento do iframe.

Suporte nos navegadores em 2026

As palavras-chave auto, contain e none são suportadas desde o Chrome 63, Firefox 59 e Safari 16 (Safari iOS 16), segundo o MDN browser-compat-data 8.1.7 (outubro de 2026). O suporte do Safari está marcado como parcial: a propriedade não tem efeito em contêineres de rolagem sem overflow rolável, e o Samsung Internet traz a mesma observação parcial. A palavra-chave chain é mais nova: o BCD a lista a partir do Chrome 150 e do Firefox 157, e não no Safari. O BCD também tem uma entrada separada no nível superior para a propriedade, que começa no Chrome 144 e no Firefox 150. O web-features 3.44.0 portanto não lista overscroll-behavior como Baseline, e o MDN diz que ela é «não Baseline» porque não funciona em alguns dos navegadores mais usados.

O que isso significa para pull to refresh: a forma longa overscroll-behavior-y com contain ou none é a que o artigo do Chrome usa, e o Safari 16 adicionou a propriedade (WebKit, setembro de 2022). Se o Safari no iPhone bloqueia o gesto de atualização da página não está dito nas notas de versão da WebKit nem no MDN, então verifique em um iPhone.

Como testar no celular

Teste pull to refresh em um dispositivo real ou em um emulador, porque é um gesto de toque.

1. Carregue a página no celular, role até o topo e arraste para baixo. Sem o CSS, o navegador pode recarregar ou quicar. Com overscroll-behavior-y: contain no body, nada deve recarregar.
2. Role um painel aninhado até o fim e continue arrastando. A página por trás deve ficar parada se o painel tiver contain.
3. Repita em cada navegador que você suporta. Chrome no Android, Safari no iPhone e Samsung Internet têm cada um as suas observações acima.
4. Repita em um aplicativo web instalado, se você publica um; veja o que é um aplicativo web progressivo para entender como a instalação muda entre plataformas.

Para Android a partir de um desktop, veja testar um site no Android a partir do desktop. Para iOS sem celular, veja testar em um iPhone sem ter um iPhone, e para o restante de uma rodada de testes mobile, a lista de testes de site mobile.

O Mobile View Extension recarrega a aba com o user agent, o tamanho de tela e a densidade de pixels de um celular, então mostra o seu layout e qual página é servida, mas funciona com mouse. Ele não envia eventos de toque, então você não consegue puxar a página para recarregar nele, e roda o Chrome de desktop, então o comportamento do Safari não é reproduzido. Use-o para conferir o layout de um botão de atualizar personalizado, e um dispositivo ou simulador para o gesto.

Perguntas frequentes

Como desativo pull to refresh em CSS?

Defina overscroll-behavior-y: contain em body ou html. O artigo do Chrome apresenta isso como uma linha que desativa o pull-to-refresh mantendo o brilho de overscroll; use none para remover o brilho também.

Qual é a diferença entre overscroll-behavior contain e none?

contain impede o encadeamento de rolagem e pode ainda mostrar um efeito de quique, enquanto none impede o encadeamento e o quique (MDN). Para pull to refresh na página, os dois param a atualização no Chrome, segundo o artigo dele.

overscroll-behavior funciona no Safari?

O Safari 16 e versões posteriores suportam a propriedade, com implementação parcial: ela não tem efeito em contêineres de rolagem sem overflow rolável (MDN browser-compat-data 8.1.7). Teste em um iPhone para ver o que acontece com o gesto no nível da página.

O que é encadeamento de rolagem?

É o navegador passando a rolagem para o contêiner pai quando um filho chega ao limite de rolagem; por exemplo, o fim de um diálogo fazendo a página por trás rolar. overscroll-behavior: contain impede isso.