Comment rendre le défilement d'un site véritablement fluide sans compromettre l'accessibilité

Avez-vous déjà visité un site où le défilement semble « sirupeux » ou, à l'inverse, trop brusque ? Les designers adorent le défilement fluide car il ajoute une touche de raffinement et une sensation premium à l'interface. Mais pour les développeurs, cela se transforme souvent en cauchemar : les bibliothèques standard de défilement fluide cassent fréquemment la navigation native, entrent en conflit avec position: sticky, ou font souffrir le navigateur avec des fréquences d'images basses.

Récemment, je suis tombé sur Lenis, créé par l'équipe de darkroom.engineering. Ces gens ont abordé le problème différemment : au lieu de remplacer complètement le comportement du navigateur, ils ont créé une couche légère qui fonctionne par-dessus le défilement natif.

Quel est le problème principal des bibliothèques classiques

La plupart des outils de défilement fluide désactivent simplement le défilement standard et essaient de le reproduire via des transformations (transformations CSS). Cela provoque des problèmes comme la rupture du focus clavier, de la recherche dans la page (Cmd+F), et des fonctionnalités des lecteurs d'écran.

Lenis (du latin — « lisse ») préserve le défilement natif. Cela signifie que votre anchor links fonctionnera, et le navigateur comprendra toujours exactement où se trouve l'utilisateur sur la page. De plus, la bibliothèque ne fait que quelques kilooctets et n'entraîne pas un tas de dépendances.

Ce que Lenis peut faire

La bibliothèque résout plusieurs points douloureux des développeurs frontend d'un coup.

Synchronisation avec WebGL et Animations

Si vous construisez des effets de parallaxe complexes ou liez le défilement à un canvas (WebGL), vous avez besoin d'une seule source de vérité pour la position du défilement. Lenis s'intègre parfaitement avec GSAP ScrollTrigger. D'après mon expérience, c'est la façon la plus stable d'éviter que les éléments « tremblent » lors d'un défilement rapide.

Travailler avec n'importe quel axe

Vous pouvez configurer la fluidité pour le défilement vertical, horizontal, ou même imbriqué. Ce dernier est particulièrement agréable : souvent, vous avez besoin que la page principale défile en douceur tandis qu'un bloc modal à l'intérieur vit sa propre vie.

Support des frameworks

Bien que je préfère le JS vanilla pour ce genre de chose, le projet dispose d'adaptateurs officiels pour React, Vue, et même Framer. Cela fait gagner du temps sur la gestion des refs et du cycle de vie des composants.

Comment démarrer

L'installation est standard :

npm i lenis

L'initialisation de base est simple comme tout. Vous pouvez activer la boucle d'animation automatique (autoRaf) pour ne pas avoir à bidouiller manuellement requestAnimationFrame :

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

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

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

Si vous utilisez GSAP (et pour les sites cool, c'est la norme de facto), l'intégration sera un peu plus complexe, mais plus fiable :

const lenis = new Lenis();

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

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

gsap.ticker.lagSmoothing(0);

Subtilités et limitations

Malgré sa coolitude, Lenis a ses particularités. Par exemple, dans Safari, les mises à jour de la fréquence d'images peuvent être limitées à 60 FPS (voire 30 FPS en mode économie d'énergie), ce qui peut parfois être visible sur les moniteurs à taux de rafraîchissement élevé.

Une autre chose — iframe. Le défilement à l'intérieur des iframes ne sera pas fluide, car ils ne propagent pas les événements de molette de souris vers l'extérieur. C'est une restriction de sécurité du navigateur, et la bibliothèque ne peut rien y faire.

Si vous avez des éléments sur votre page qui doivent défiler normalement (comme un champ de texte ou un menu déroulant), utilisez l'attribut data-lenis-prevent. Cela vous évitera un comportement étrange de l'interface.

Faut-il l'implémenter

Si vous créez une landing page, un portfolio ou un site promotionnel où l'esthétique compte — certainement oui. Lenis vous donne cet effet « coûteux » sans compromettre l'accessibilité.

Pour les lourds tableaux de bord ou panneaux d'administration avec des tonnes de tableaux, je retiendrais probablement. Là, une couche d'abstraction supplémentaire sur le défilement ne peut que gêner les utilisateurs qui naviguent rapidement dans les données.

Dans l'ensemble, c'est l'un des outils les plus propres et les plus performants de sa catégorie aujourd'hui. Consultez leur Showcase — il contient des exemples vraiment impressionnants de la façon dont le défilement ordinaire devient partie intégrante du storytelling visuel.