So wird Scrollen wirklich flüssig – ohne die Barrierefreiheit zu opfern

Warst du schon mal auf einer Website, bei der das Scrollen sich "sirupig" anfühlt oder umgekehrt zu abrupt? Designer lieben flüssiges Scrollen, weil es der Oberfläche Eleganz und ein hochwertiges Gefühl verleiht. Für Entwickler wird es jedoch oft zum Albtraum: Standard-Bibliotheken für flüssiges Scrollen brechen häufig die native Navigation, kollidieren mit position: sticky oder lassen den Browser unter niedrigen Bildraten leiden.

Neulich bin ich auf Lenis vom Team darkroom.engineering gestoßen. Diese Leute haben das Problem anders angepackt: Anstatt das Browserverhalten komplett zu ersetzen, haben sie eine leichtgewichtige Schicht geschaffen, die auf dem nativen Scrollen aufbaut.

Was ist das Hauptproblem mit gewöhnlichen Bibliotheken

Die meisten Tools für flüssiges Scrollen "deaktivieren" einfach das Standard-Scrollen und versuchen, es durch Transforms (CSS-Transforms) nachzuahmen. Dadurch brechen Dinge wie Tastaturfokus, Seitensuche (Cmd+F) und die Funktionalität von Screenreadern.

Lenis (vom Lateinischen – "glatt") bewahrt das native Scrollen. Das bedeutet, dass dein anchor links funktionieren wird und der Browser immer noch genau versteht, wo sich der Benutzer auf der Seite befindet. Außerdem ist die Bibliothek nur wenige Kilobyte groß und schleppt keinen Berg an Abhängigkeiten mit sich herum.

Was Lenis kann

Die Bibliothek löst mehrere Schmerzpunkte von Frontend-Entwicklern auf einmal.

Synchronisation mit WebGL und Animationen

Wenn du komplexe Parallax-Effekte erstellst oder das Scrollen an eine Leinwand (WebGL) bindest, brauchst du eine einzige Quelle der Wahrheit für die Scroll-Position. Lenis funktioniert perfekt mit GSAP ScrollTrigger. Aus meiner Erfahrung ist dies der stabilste Weg, um zu vermeiden, dass Elemente beim schnellen Scrollen "zittern".

Arbeit mit beliebigen Achsen

Du kannst die Glätte für vertikales, horizontales oder sogar verschachteltes Scrollen konfigurieren. Letzteres ist besonders schön: Oft braucht man, dass die Hauptseite flüssig scrollt, während ein Modalblock darin sein eigenes Leben lebt.

Framework-Unterstützung

Obwohl ich für solche Dinge lieber Vanilla JS bevorzuge, hat das Projekt offizielle Adapter für React, Vue und sogar Framer. Das spart Zeit beim Übergeben von Refs und der Verwaltung des Komponenten-Lebenszyklus.

Wie man loslegt

Die Installation ist Standard:

npm i lenis

Die grundlegende Initialisierung ist so einfach wie möglich. Du kannst die automatische Animationsschleife aktivieren (autoRaf), damit du dich nicht manuell mit requestAnimationFrame herumschlagen musst:

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

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

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

Wenn du GSAP verwendest (und für coole Websites ist es der De-facto-Standard), ist die Integration etwas komplexer, aber zuverlässiger:

const lenis = new Lenis();

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

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

gsap.ticker.lagSmoothing(0);

Feinheiten und Einschränkungen

So cool es auch ist, Lenis hat seine Eigenheiten. In Safari beispielsweise können Frame-Rate-Updates auf 60 FPS begrenzt sein (oder sogar 30 FPS im Energiesparmodus), was auf Monitoren mit hoher Bildwiederholrate manchmal auffallen kann.

Eine weitere Sache – iframe. Das Scrollen innerhalb von iframes wird nicht flüssig sein, da sie Mausrad-Events nicht nach außen weiterleiten. Dies ist eine Browser-Sicherheitseinschränkung, und die Bibliothek kann nichts dagegen tun.

Wenn du Elemente auf deiner Seite hast, die normal scrollen sollten (wie ein Textfeld oder Dropdown), verwende das data-lenis-prevent-Attribut. Das erspart dir merkwürdiges Interface-Verhalten.

Lohnt es sich umzusetzen

Wenn du eine Landingpage, ein Portfolio oder eine Promo-Website erstellst, bei der Ästhetik wichtig ist – auf jeden Fall ja. Lenis gibt dir diesen "teuren" Effekt, ohne die Barrierefreiheit zu opfern.

Für umfangreiche Dashboards oder Admin-Panels mit Unmengen von Tabellen würde ich wahrscheinlich abwarten. Dort kann eine zusätzliche Abstraktionsschicht über dem Scrollen den Benutzern nur im Weg stehen, wenn sie schnell durch Daten navigieren wollen.

Insgesamt ist es eines der saubersten und performantesten Tools in seiner Klasse heute. Schau dir ihre Showcase an – dort gibt es wirklich beeindruckende Beispiele dafür, wie gewöhnliches Scrollen Teil des visuellen Storytellings wird.