Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A propriedade css scroll-behavior especifica o comportamento de rolagem para uma caixa de scrolling, quando a rolagem acontece devido às APIs do CSSOM. Qualquer outro scroll, aqueles que são executados pelo usuário, não são afetados por esta propriedade. Quando esta propriedade é especificada no elemento raiz, ela se aplica à viewport.

User agents podem ignorar essa propriedade.

/* Valores das palavras-chave */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Valores globais */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

Note que qualquer outro scroll, tem essa tal performace para o usuario, essa propriedade não é afetada. Quando esta propriedade é especificada na raiz do elemento então aplicamos na instancia do viewport. 

Os usuarios que agem com está propriedade pode ignora-lá.

Initial valueauto
Aplica-se ascrolling boxes
Inheritednão
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

O scroll-behavior é uma propriedade específica, com um valor de uma palavra-chave listada abaixo.

Valores

auto
A caixa de rolagem rola instantaneamente.
smooth
A caixa de scroll rola de forma suave usando uma função de temporização definida pelo usuário em um período de tempo. Os agentes do usuário devem seguir as convenções da plataforma, se houver.

Sintaxe formal

auto | smooth

Exemplo

HTML

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

CSS

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

Saída

Especificações

Especificações Status Comentário
CSS Object Model (CSSOM) View Module
The definition of 'scroll-behavior' in that specification.
Rascunho atual Especificações inicial

Compatibilidade com navegador

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 61[1] 36 (36) Não suportado (Yes)[1] Não suportado
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Não suportado 36 (36) Não suportado Não suportado Não suportado

[1] Suporte ao Chrome e Opera, habilitando "Smooth Scrolling" ou "Enable experimental web platform features".

Etiquetas do documento e colaboradores

Colaboradores desta página: otaviogui, ogawaryu
Última atualização por: otaviogui,