A scroll-behaviorpropriedade em CSS permite definir se o local de rolagem do navegador salta para um novo local ou anima suavemente a transição quando um usuário clica em um link que aponta uma posição ancorada em uma caixa de rolagem.
html ( scroll-behavior: smooth; )Explicação mais profunda
Espere, espere, o que é essa caixa de rolagem de que falamos? É um elemento com conteúdo que extrapola seus limites.
Veja a caixa de rolagem da caneta por CSS-Tricks (@ css-tricks) no CodePen.
Observe como a caixa na demonstração acima tem uma altura fixa de 200px? Qualquer conteúdo que exceda essa altura está fora dos limites da caixa e adicionamos overflow-y: scrollpara tornar esse conteúdo adicional acessível com rolagem vertical. Isso é o que queremos dizer com uma caixa de rolagem.
Agora, digamos que adicionemos uma navegação ao topo da caixa com cada link direcionando as três seções de conteúdo:
Veja a caixa de rolagem da caneta com Nav por CSS-Tricks (@ css-tricks) no CodePen.
Cada link leva o usuário diretamente para as diferentes seções de conteúdo dentro da caixa de rolagem. Por padrão, essa transição é um salto abrupto.
Esse tipo de salto pode ser chocante. É aí que scroll-behaviorentra e nos permite definir uma transição de rolagem suave. Esse tipo de coisa costumava exigir Javascript sofisticado, mas scroll-behaviornos dará a capacidade de fazer isso nativamente em CSS, assim que o suporte do navegador melhorar.
Sintaxe
.module ( scroll-behavior: ( auto | smooth ); )Valores
A scroll-behaviorpropriedade aceita dois valores, que essencialmente ativam e desativam o recurso de rolagem suave.
auto(padrão): Este valor permite o salto abrupto entre os elementos dentro da caixa de rolagem.smooth: Fiel ao seu nome, este valor é a transição suave e animada entre os elementos na caixa de rolagem.
Demo
A demonstração a seguir só funcionará no Chrome 61+, Firefox 36+ e Opera 48+ no momento em que este livro foi escrito.
Veja a caixa de rolagem da caneta com `scroll-behaviour` da CSS-Tricks (@ css-tricks) no CodePen.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 61 | 36 | Não | 79 | Não |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Não |
Mais Informações
- Módulo de visualização CSSOM: a especificação de rascunho, incluindo a propriedade CSS. O rascunho atual inclui uma recomendação para mover o
scroll-behaviorpara outra especificação, então será interessante ver onde isso vai parar. - Mozilla Developer Network: a referência MDN para a especificação
- Status da plataforma Microsoft Edge: atualmente exibe o status deste recurso como Em consideração
- Status da plataforma Chrome: atualmente mostra o status deste recurso como Em desenvolvimento e inclui status de outras plataformas como um recurso
- Snippet de rolagem suave: Snippets para ativar a rolagem suave com Javascript e jQuery
- Rolagem suave e acessibilidade: uma postagem de truques CSS sobre o impacto da rolagem suave habilitada para Javascript