CSS scroll-behavior eigenschap

Definitie en gebruik

De scroll-behavior-eigenschap bepaalt of de positie in een scrollvak soepel (met animatie) wordt gescrolld wanneer de gebruiker op een link in een scrollvak klikt, in plaats van een directe sprong.

Voorbeeld

Voeg een soepele scroll-effect toe aan het document:

html {
  scroll-behavior: smooth;
}

Probeer het zelf uit

CSS syntaxis

scroll-behavior: auto|smooth|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
auto Standaardwaarde. Stelt een directe 'scroll-effect' tussen elementen in het scrollvak mogelijk.
smooth Stelt een soepele 'scroll-effect' tussen elementen in het scrollvak mogelijk.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap van de ouderweergave erven. Raadpleeg inherit.

Technische details

Standaardwaarde: auto
Inheritantie: Nee
Animatie: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSSOM View Module (werkversie)
JavaScript syntaxis: object.style.scrollBehavior="smooth"

browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0