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;

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

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

Examplo

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

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: ogawaryu
 Última atualização por: ogawaryu,