Jak zapewnić naprawdę płynne przewijanie strony bez naruszania dostępności

Czy kiedykolwiek odwiedziłeś stronę, na której przewijanie wydaje się „gęste" lub, przeciwnie, zbyt gwałtowne? Projektanci uwielbiają płynne przewijanie, ponieważ dodaje ono elegancji i premium feelingu do interfejsu. Ale dla developerów często zamienia się to w koszmar: standardowe biblioteki płynnego przewijania regularnie psują natywną nawigację, powodują konflikty z position: sticky lub sprawiają, że przeglądarka cierpi z powodu niskiej liczby klatek na sekundę.

Ostatnio natknąłem się na Lenis od zespołu darkroom.engineering. Ci ludzie podeszli do problemu inaczej: zamiast całkowicie zastępować zachowanie przeglądarki, stworzyli lekką warstwę, która działa na szczycie natywnego przewijania.

Jaka jest główna wada zwykłych bibliotek

Większość narzędzi do płynnego przewijania po prostu „wyłącza" standardowe przewijanie i próbuje je naśladować za pomocą transformacji (transformacji CSS). Powoduje to, że takie rzeczy jak fokus klawiatury, wyszukiwanie na stronie (Cmd+F) i funkcjonalność czytników ekranu przestają działać.

Lenis (z łaciny — „gładki") zachowuje natywne przewijanie. Oznacza to, że Twój anchor links będzie działać, a przeglądarka nadal będzie dokładnie wiedzieć, gdzie użytkownik znajduje się na stronie. Dodatkowo biblioteka waży zaledwie kilka kilobajtów i nie ciągnie za sobą góry zależności.

Co potrafi Lenis

Biblioteka rozwiązuje kilka problemów frontend developera na raz.

Synchronizacja z WebGL i animacjami

Jeśli budujesz złożone efekty paralaksy lub powiązujesz przewijanie z canvas (WebGL), potrzebujesz jednego źródła prawdy dla pozycji przewijania. Lenis świetnie współpracuje z GSAP ScrollTrigger. Z mojego doświadczenia wynika, że to najstabilniejszy sposób, aby uniknąć „szarpania" elementów podczas szybkiego przewijania.

Praca z dowolnymi osiami

Możesz skonfigurować płynność dla przewijania pionowego, poziomego, a nawet zagnieżdżonego. To ostatnie jest szczególnie przydatne: często potrzebujesz, aby główna strona przewijała się płynnie, podczas gdy jakiś modalny blok wewnątrz żyje własnym życiem.

Wsparcie dla frameworków

Choć wolę vanilla JS w takich przypadkach, projekt ma oficjalne adaptery dla React, Vue, a nawet Framer. Oszczędza to czas na przekazywaniu refs i zarządzaniu cyklem życia komponentów.

Jak zacząć

Instalacja jest standardowa:

npm i lenis

Podstawowa inicjalizacja jest tak prosta, jak tylko możliwe. Możesz włączyć automatyczną pętlę animacji (autoRaf), żebyś nie musiał ręcznie bawić się z requestAnimationFrame:

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

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

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

Jeśli używasz GSAP (a dla coolowych stron to de facto standard), integracja będzie nieco bardziej złożona, ale za to bardziej niezawodna:

const lenis = new Lenis();

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

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

gsap.ticker.lagSmoothing(0);

Zagrychy i ograniczenia

Mimo że jest świetny, Lenis ma swoje dziwactwa. Na przykład w Safari aktualizacje klatek na sekundę mogą być ograniczone do 60 FPS (lub nawet 30 FPS w trybie niskiego zużycia energii), co czasem może być zauważalne na monitorach o wysokiej częstotliwości odświeżania.

Inna sprawa — iframe. Przewijanie wewnątrz iframe nie będzie płynne, ponieważ nie przekazują one zdarzeń kółka myszy na zewnątrz. To ograniczenie bezpieczeństwa przeglądarki i biblioteka nic na to nie poradzi.

Jeśli masz na stronie elementy, które powinny przewijać się normalnie (jak pole tekstowe czy rozwijane menu), użyj atrybutu data-lenis-prevent. Zaoszczędzi Ci to dziwnego zachowania interfejsu.

Czy warto wdrożyć

Jeśli budujesz landing page, portfolio lub stronę promocyjną, gdzie liczy się estetyka — zdecydowanie tak. Lenis daje Ci ten „drogi" efekt bez kompromisów w dostępności.

W przypadku ciężkich dashboardów czy paneli administracyjnych z masą tabel, prawdopodobnie bym się wstrzymał. Tam dodatkowa warstwa abstrakcji nad przewijaniem może tylko przeszkadzać użytkownikom w szybkim nawigowaniu przez dane.

Ogólnie rzecz biorąc, to jedno z najczystszych i najwydajniejszych narzędzi w swojej klasie. Sprawdź ich Showcase — znajdziesz tam naprawdę imponujące przykłady tego, jak zwykłe przewijanie staje się częścią opowieści wizualnej.