Utilitário
Scroll Behavior
Habilita rolagem suave e controla o offset entre o topo do viewport e o alvo.
Smooth scrolling
| Classe CSS | Descrição |
|---|---|
.scroll-smooth | scroll-behavior: smooth; |
Aplique .scroll-smooth ao elemento que faz a rolagem (por
padrão, o <html>).
Scroll padding
Por padrão, a página rola até o topo do elemento alvo. Para criar um gap
entre o topo do viewport e o elemento, use scroll-padding-*:
| Classe CSS | Descrição |
|---|---|
.scroll-padding-4xs | scroll-padding: var(--space-4xs); |
.scroll-padding-3xs | scroll-padding: var(--space-3xs); |
.scroll-padding-2xs | scroll-padding: var(--space-2xs); |
.scroll-padding-xs | scroll-padding: var(--space-xs); |
.scroll-padding-sm | scroll-padding: var(--space-sm); |
.scroll-padding-md | scroll-padding: var(--space-md); |
.scroll-padding-lg | scroll-padding: var(--space-lg); |
.scroll-padding-xl | scroll-padding: var(--space-xl); |
.scroll-padding-2xl | scroll-padding: var(--space-2xl); |
.scroll-padding-3xl | scroll-padding: var(--space-3xl); |
.scroll-padding-4xl | scroll-padding: var(--space-4xl); |
Em projetos com header fixo, costuma ser útil criar um scroll-padding customizado que considere a altura do header:
.scroll-padding-header {
scroll-padding: calc(var(--header-height) + var(--space-sm));
}