`scroll-behavior, scroll-margin și scroll-padding` în CSS

Design Responsiv și Interfață CSS3+ (smooth: Chrome 61, Firefox 36, Safari 15.4)

Face derularea spre ancore (#sectiune) lină și lasă spațiu pentru antetul fix, ca titlul să nu ajungă sub el.

Sintaxă CSS

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

h2 {
  scroll-margin-top: 80px;
}

Ce face `scroll-behavior, scroll-margin și scroll-padding`

scroll-behavior: smooth, pus pe containerul care se derulează (de obicei html), transformă săriturile bruște la linkuri de tip #contact într-o derulare animată. Se aplică și la derulările făcute din JavaScript cu scrollIntoView() sau scrollTo(), dar nu și la derularea făcută de utilizator cu rotița.

Când pagina are un antet fix (position: sticky sau fixed), titlul secțiunii ajunge ascuns sub antet. scroll-margin-top pe ținte sau scroll-padding-top pe containerul care se derulează păstrează un spațiu liber la oprire.

Unele persoane au setată în sistem preferința de mișcare redusă. Pune smooth doar în @media (prefers-reduced-motion: no-preference) ca să respecți această preferință.

Valori uzuale

Valoare	Descriere
`scroll-behavior: auto`	Salt instantaneu (valoarea implicită).
`scroll-behavior: smooth`	Derulare animată spre țintă.
`scroll-margin-top`	Spațiu păstrat deasupra elementului-țintă când se oprește derularea.
`scroll-padding-top`	Spațiu păstrat în partea de sus a containerului, pentru toate țintele.

Exemple

Exemplul 1: Meniu de restaurant cu linkuri spre secțiuni și antet fix

Antetul are 72 px; ținta se oprește la 16 px sub el.

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
html {
  scroll-padding-top: 88px; /* 72px antet + 16px spațiu */
}
.antet {
  position: sticky;
  top: 0;
  height: 72px;
}

Efect vizual în browser

La clic pe „Deserturi” pagina alunecă lin până la secțiune, iar titlul „Deserturi” apare complet vizibil sub antet. Cu mișcarea redusă activată în sistem, pagina sare direct, dar tot cu titlul vizibil.

Exemplul 2: Spațiu suplimentar doar pentru anumite ținte

scroll-margin se pune pe elementul-țintă și se adună cu scroll-padding-ul containerului.

.intrebare-faq {
  scroll-margin-top: 24px;
}