Nota: apenas traduzi o texto abaixo e postei aqui.
A propriedade scroll-behavior
A propriedade scroll-behavior
informa ao navegador como lidar com o scrolling para anchor links dentro de um elemento.
O valor default, auto
, dá um salto forte como você está acostumado. Um valor de scroll
informa ao navegador para animar o scrolling. Não há como especificar a atenuação, mas ela está vinculada à taxa de atualização do navegador para fornecer animações suaves e sedosas.
/**
* Habilita smooth scrolling no document inteiro
*/
html {
scroll-behavior: smooth;
}
Aqui está uma demonstração.
Normalmente eu o habilito em todo o html document, mas você pode restringi-lo a elementos específicos, se desejar.
/**
* Habilita smooth scrolling no elemento #be-cool
*/
#be-cool {
scroll-behavior: smooth;
}
Preocupações com acessibilidade
As animações podem causar problemas para usuários que sofrem de enjôo e outras condições.
Felizmente, Windows, MacOs, iOS e Android oferecem uma maneira para os usuários especificarem que preferem movimentos reduzidos. E todos os navegadores modernos (mas não o IE) fornecem uma maneira de verificar essa configuração em CSS e JavaScript.
Ao usar scroll-behavior
, você deve adicionar uma verificação @media
para preders-reduced-motion: reduce
e reverter para o default auto
.
/**
* Habilita smooth scrolling quando usuários
* tem prefers-reduced-motion habilitado
*/
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
Suporte do navegador
A propriedade scroll-behavior
funciona na maioria dos navegadores modernos. Também não tem suporte para IE.
Aqui segue a definição completa mais atual do suporte a esse recurso.
No entanto, este é um ótimo recurso aprimorado progressivamente.
Fonte
Newsletter de Go Make Things
Top comments (0)