scroll-behavior
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since março de 2022.
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 value | auto |
|---|---|
| Aplica-se a | scrolling boxes |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |
Sintaxe
O scroll-behavior é uma propriedade específica, com um valor de uma palavra-chave listada abaixo.
Valores
Sintaxe formal
scroll-behavior =
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
| Specification |
|---|
| CSS Overflow Module Level 3 # smooth-scrolling |
Compatibilidade com navegador
Loading…