Come Rendere lo Scorrimento del Sito Davvero Fluido Senza Compromettere l'Accessibilità

Ti è mai capitato di visitare un sito in cui lo scorrimento appare "viscoso" o, al contrario, troppo brusco? I designer amano lo scroll fluido perché aggiunge raffinatezza e una sensazione premium all'interfaccia. Ma per gli sviluppatori, spesso diventa un incubo: le librerie standard per lo scroll fluido rompono frequentemente la navigazione nativa, entrano in conflitto con position: sticky, o fanno soffrire il browser con bassi frame rate.

Recentemente ho scoperto Lenis dal team di darkroom.engineering. Queste persone hanno affrontato il problema in modo diverso: invece di sostituire completamente il comportamento del browser, hanno creato un layer leggero che funziona sopra lo scrolling nativo.

Qual è il Problema Principale delle Librerie Tradizionali

La maggior parte degli strumenti per lo scroll fluido disabilitano semplicemente lo scrolling standard e cercano di emularlo attraverso le trasformazioni (CSS transforms). Questo causa la rottura di cose come il focus da tastiera, la ricerca nella pagina (Cmd+F) e la funzionalità degli screen reader.

Lenis (dal latino — "liscio") preserva lo scrolling nativo. Questo significa che il tuo anchor links funzionerà, e il browser capirà ancora esattamente dove si trova l'utente nella pagina. Inoltre, la libreria pesa solo pochi kilobyte e non trascina dietro una montagna di dipendenze.

Cosa Sa Fare Lenis

La libreria affronta diversi punti dolenti degli sviluppatori frontend tutti insieme.

Sincronizzazione con WebGL e Animazioni

Se stai costruendo effetti parallax complessi o collegando lo scroll a una canvas (WebGL), hai bisogno di un'unica fonte di verità per la posizione dello scroll. Lenis si integra perfettamente con GSAP ScrollTrigger. Nella mia esperienza, questo è il modo più stabile per evitare che gli elementi "tremolino" durante lo scroll veloce.

Lavorare con Qualsiasi Asse

Puoi configurare la fluidità per lo scrolling verticale, orizzontale, o persino nidificato. Quest'ultimo è particolarmente utile: spesso hai bisogno che la pagina principale scorra fluidamente mentre qualche blocco modale al suo interno vive la propria vita.

Supporto per i Framework

Sebbene io preferisca vanilla JS per queste cose, il progetto ha adapter ufficiali per React, Vue e persino Framer. Questo fa risparmiare tempo nel passaggio dei refs e nella gestione del ciclo di vita dei componenti.

Come Iniziare

L'installazione è standard:

npm i lenis

L'inizializzazione base è semplicissima. Puoi abilitare il loop di animazione automatico (autoRaf) così non devi preoccuparti di gestire requestAnimationFrame manualmente:

import Lenis from 'lenis'
import 'lenis/dist/lenis.css'

const lenis = new Lenis({
  autoRaf: true,
});

// Можно подписаться на события, если нужно обновлять свои анимации
lenis.on('scroll', (e) => {
  console.log('Текущая позиция:', e.scroll);
});

Se stai usando GSAP (e per i siti cool, è lo standard de facto), l'integrazione sarà un po' più complessa, ma più affidabile:

const lenis = new Lenis();

lenis.on('scroll', ScrollTrigger.update);

gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});

gsap.ticker.lagSmoothing(0);

Dettagli e Limitazioni

Per quanto figo sia, Lenis ha le sue particolarità. Ad esempio, in Safari, gli aggiornamenti del frame rate potrebbero essere limitati a 60 FPS (o persino 30 FPS in modalità risparmio energetico), cosa che a volte può essere evidente sui monitor ad alta frequenza di aggiornamento.

Un'altra cosa — iframe. Lo scrolling all'interno degli iframe non sarà fluido, poiché questi non propagano gli eventi della rotella del mouse verso l'esterno. Questa è una restrizione di sicurezza del browser, e la libreria non può farci nulla.

Se hai elementi nella pagina che dovrebbero scorrere normalmente (come un campo di testo o un menu a tendina), usa l'attributo data-lenis-prevent. Questo ti salverà da comportamenti strani dell'interfaccia.

Vale la Pena Implementarlo

Se stai costruendo una landing page, un portfolio o un sito promozionale dove l'estetica conta — decisamente sì. Lenis ti dà quell'effetto "costoso" senza compromettere l'accessibilità.

Per dashboard pesanti o pannelli admin con tabelle su tabelle, probabilmente mi asterrei. Lì, un ulteriore layer di astrazione sopra lo scrolling può solo intralciare gli utenti che navigano rapidamente tra i dati.

Nel complesso, è uno degli strumenti più puliti e performanti della sua categoria oggi. Dai un'occhiata al loro Showcase — ci sono esempi davvero impressionanti di come lo scrolling ordinario diventa parte della narrazione visiva.