Migliora l’Interaction to Next Paint abbandonando lo scrolling JavaScript

Sostituisci lo scrolling JavaScript con CSS oggi

Questo blog ha un po’ di storia. Fino al 2017 l’unico modo per aggiungere un comportamento di scorrimento fluido e coerente era usare una libreria JavaScript. E molti sviluppatori facevano proprio così. I Core Web Vitals non esistevano ancora e tutti usavano jQuery come libreria JavaScript principale.

Ora facciamo un salto ai giorni nostri. Esistono alternative molto migliori, più veloci e più semplici allo scrolling di ancoraggio basato su JavaScript. Tuttavia, come consulente Core Web Vitals, li vedo ancora ogni giorno.

Ultima revisione di Arjen Karel a febbraio 2026

Perché lo scrolling basato su JavaScript è ‘cattivo’

Lo scrolling basato su JavaScript è cattivo per 2 motivi: è complicato ed è lento.

Complicato: Lo scrolling basato su JavaScript è inutilmente complicato. Devi scrivere e mantenere codice difficile da leggere e anche se il metodo Window.scrollTo() ha reso questo codice molto più semplice, è comunque molto più difficile da mantenere rispetto a una singola riga di CSS.

Lento. JavaScript tende a bloccare il thread principale ed è sempre più lento della sua controparte CSS. A seconda di come la funzione di scroll è stata implementata, può bloccare il thread principale per un tempo considerevole e causare un ritardo significativo nella metrica Interaction to Next Paint! Secondo il Web Almanac 2025, la mediana del Total Blocking Time su mobile si attesta a 1.916 millisecondi. Ogni funzione JavaScript non necessaria che compete per il thread principale peggiora la situazione.

Perché il CSS Smooth Scrolling è ‘buono’

Ho parlato del perché lo scrolling basato su JavaScript è cattivo. Il contrario è vero per lo scorrimento fluido basato su CSS. È davvero semplice come aggiungere quanto segue al tuo foglio di stile:

html{ scroll-behavior: smooth;}

Semplice ed efficace

Il one-liner CSS html { scroll-behavior: smooth; } è super semplice da implementare e più efficiente delle soluzioni basate su JavaScript. Questa singola riga di codice abilita lo scorrimento fluido per l’intera pagina senza alcuna funzione JavaScript difficile da mantenere. Se vuoi andare oltre e differire o rimuovere JavaScript non necessario completamente, il tuo tempo di elaborazione INP ti ringrazierà.

Prestazioni migliori

Lo scorrimento fluido basato su CSS è gestito nativamente dal browser e in tutti i casi supererà le implementazioni JavaScript. Questo è particolarmente importante per l’ottimizzazione della metrica Interaction to Next Paint (INP), poiché peserà meno sul thread principale del browser. I gestori di scroll JavaScript devono essere eseguiti sul thread principale, e ogni millisecondo trascorso lì è un millisecondo che ritarda la prossima interazione dell’utente. Il comportamento di scroll CSS viene eseguito completamente al di fuori del thread principale. Se hai ancora JavaScript che deve essere eseguito durante le interazioni, approfondisci come cedere il thread principale.

Lo scorrimento fluido delle ancore è solo l’inizio. CSS sta assumendo sempre più responsabilità di scroll che prima richiedevano JavaScript. Le animazioni guidate dallo scroll (Chrome 115+, Safari 26) ti permettono di legare il progresso dell’animazione alla posizione di scroll, sostituendo completamente i gestori di scroll con requestAnimationFrame. Le animazioni attivate dallo scroll (Chrome 145) lanciano animazioni basate sul tempo quando si attraversa un offset di scroll, sostituendo IntersectionObserver per gli effetti di rivelazione. E le query di contenitore scroll-state (Chrome 133+) ti permettono di stilizzare gli elementi in base al fatto che siano fissati, agganciati o scorrevoli, senza bisogno di JavaScript. La tendenza è chiara: sposta la logica di scroll da JavaScript a CSS ovunque tu possa.

Compatibilità dei browser

Il CSS smooth scrolling ha un supporto globale dei browser del 95% secondo CanIUse. È baseline in tutti i principali browser da marzo 2022. I browser più vecchi, dove lo scorrimento fluido non è supportato, ricadono semplicemente sul salto diretto predefinito all’ancora.

Personalizzazione facile

CSS ti permette di personalizzare facilmente il comportamento di scroll. Per esempio la proprietà scroll-margin-top ti permette di impostare la distanza superiore dall’elemento scrollato:

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

O ancora più facilmente con la pseudo classe ‘target’

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

Rispettare le preferenze di movimento

Alcuni utenti soffrono di chinetosi a causa delle animazioni di scroll. Avvolgere il tuo scorrimento fluido in una media query prefers-reduced-motion garantisce che quegli utenti ottengano salti istantanei al suo posto:

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

Questo applica lo scorrimento fluido solo per gli utenti che non hanno richiesto il movimento ridotto. Gli utenti con disturbi vestibolari o sensibilità al movimento vedranno lo scroll istantaneo predefinito.

Esempio completo

Per vedere questo codice in azione, clicca semplicemente sull’Indice in cima a questa pagina. Noterai un bel scorrimento fluido verso l’ancora cliccata.

Ecco un esempio semplificato da copiare e riutilizzare

<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>