Verbeter de Interaction to Next Paint door JavaScript-scrolling te verwijderen

Vervang JavaScript-scrolling vandaag nog door CSS

Deze blog heeft een beetje geschiedenis. Tot 2017 was de enige manier om consistent vloeiend scrollgedrag toe te voegen het gebruik van een JavaScript-bibliotheek. En dat is precies wat veel ontwikkelaars deden. De Core Web Vitals bestonden nog niet en iedereen gebruikte jQuery als belangrijkste JavaScript-bibliotheek.

Spring nu vooruit naar vandaag. Er zijn veel betere, snellere en eenvoudigere alternatieven voor JavaScript-gebaseerd anchor-scrolling. Maar als Core Web Vitals-consultant zie ik ze nog elke dag.

Laatst beoordeeld door Arjen Karel in februari 2026

Waarom JavaScript-gebaseerd scrolling ‘slecht’ is

JavaScript-gebaseerd scrolling is slecht om 2 redenen: het is ingewikkeld en het is traag.

Ingewikkeld: JavaScript-gebaseerd scrolling is onnodig ingewikkeld. Je moet moeilijk leesbare code schrijven en onderhouden en hoewel de Window.scrollTo()-methode deze code een stuk eenvoudiger heeft gemaakt, is het nog steeds veel moeilijker te onderhouden dan één regel CSS.

Traag. JavaScript heeft de neiging om de main thread te blokkeren en is altijd langzamer dan zijn CSS-tegenhanger. Afhankelijk van hoe de scroll-functie is geïmplementeerd, kan het de main thread voor behoorlijk wat tijd blokkeren en een grote vertraging veroorzaken in de Interaction to Next Paint-metriek! Volgens de 2025 Web Almanac ligt de mediane Total Blocking Time op mobiel op 1.916 milliseconden. Elke onnodige JavaScript-functie die strijdt om de main thread maakt dat erger.

Waarom CSS Smooth Scrolling ‘goed’ is

Ik heb verteld waarom JavaScript-gebaseerd scrolling slecht is. Het tegenovergestelde is waar voor CSS-gebaseerd vloeiend scrolling. Het is echt zo simpel als het volgende toevoegen aan je stylesheet:

html{ scroll-behavior: smooth;}

Simpel en effectief

De CSS-oneliner html { scroll-behavior: smooth; } is super simpel te implementeren en efficiënter dan JavaScript-gebaseerde oplossingen. Deze enkele regel code maakt vloeiend scrolling mogelijk voor de hele pagina zonder moeilijk te onderhouden JavaScript-functies. Als je verder wilt gaan en onnodig JavaScript uitstellen of verwijderen, zal je INP-verwerkingstijd je dankbaar zijn.

Betere prestaties

CSS-gebaseerd vloeiend scrolling wordt native door de browser afgehandeld en zal in alle gevallen JavaScript-implementaties overtreffen. Dit is vooral belangrijk voor het optimaliseren van de Interaction to Next Paint (INP)-metriek, omdat het minder belastend is voor de main thread van de browser. JavaScript scroll-handlers moeten op de main thread draaien, en elke milliseconde die daar wordt besteed is een milliseconde die de volgende gebruikersinteractie vertraagt. CSS scroll-gedrag draait volledig buiten de main thread. Als je nog JavaScript hebt dat tijdens interacties moet draaien, lees dan meer over hoe je de main thread kunt vrijgeven.

Vloeiend anchor-scrolling is nog maar het begin. CSS neemt steeds meer scroll-verantwoordelijkheden over die voorheen JavaScript vereisten. Scroll-gestuurde animaties (Chrome 115+, Safari 26) laten je animatievoortgang koppelen aan de scrollpositie, en vervangen requestAnimationFrame scroll-handlers volledig. Scroll-getriggerde animaties (Chrome 145) starten tijdgebaseerde animaties bij het passeren van een scroll-offset, en vervangen IntersectionObserver voor onthuleffecten. En scroll-state container queries (Chrome 133+) laten je elementen stylen op basis van of ze vastzitten, gesnapt zijn of scrollbaar zijn, zonder JavaScript. De trend is duidelijk: verplaats scroll-logica uit JavaScript naar CSS waar je maar kunt.

Browsercompatibiliteit

CSS smooth scrolling heeft volgens CanIUse een wereldwijde browserondersteuning van 95%. Het is sinds maart 2022 baseline in alle grote browsers. Oudere browsers, waar vloeiend scrolling niet wordt ondersteund, vallen simpelweg terug op de standaard directe sprong naar het anker.

Eenvoudige aanpassing

CSS laat je het scrollgedrag eenvoudig aanpassen. Bijvoorbeeld de scroll-margin-top eigenschap laat je de bovenste afstand tot het gescrollde element instellen:

h1, h2, h3 {scroll-margin-top: 5rem;} 

Of nog eenvoudiger met de ‘target’ pseudo class

:target {scroll-margin-top: 5rem;} 

Respecteer bewegingsvoorkeuren

Sommige gebruikers ervaren bewegingsziekte door scroll-animaties. Het inpakken van je vloeiende scrolling in een prefers-reduced-motion media query zorgt ervoor dat die gebruikers in plaats daarvan directe sprongen krijgen:

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

Dit past vloeiend scrolling alleen toe voor gebruikers die geen verminderde beweging hebben aangevraagd. Gebruikers met vestibulaire stoornissen of bewegingsgevoeligheid zien de standaard directe scroll.

Volledig voorbeeld

Om deze code in actie te zien, klik simpelweg op de inhoudsopgave bovenaan deze pagina. Je zult een mooi vloeiend scrollen naar het aangeklikte anker opmerken.

Hier is een vereenvoudigd voorbeeld om te kopiëren en te hergebruiken

<html>

<head>
    <title>Smooth scroll to target</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
        :target {
            scroll-margin-top: 5rem;
        }
        .largedivider {
            height: 1000px;
        }

    </style>

</head>

<body>
    <nav>
        <a href="#target">scroll to target</a>
    </nav>
    <div class="largedivider"> -- </div>
    <h2 id="target">scroll to me</h2>
    <div class="largedivider"> -- </div>
</body>

</html>