アクセシビリティを損なわず、Webサイトのスクロールを真にスムーズにする方法

スクロールが「シロップのように」感じられた経験はありませんか？あるいは、逆に 너무 날카로웠나요? デザイナーはスムーズスクロールが好きです。インターフェースに洗練された印象とプレミアム感を与えるからです。しかし開発者にとっては、それはしばしば悪夢となります。標準的なスムーズスクロールライブラリはネイティブナビゲーションを壊し、position: stickyと競合したり、ブラウザのフレームレートを低下させることがあるからです。

最近、darkroom.engineeringチームによるLenisを見つけました。彼らは問題を異なるアプローチで捉えくれました。ブラウザの動作を完全に置き換えるのではなく、ネイティブスクロールの上で動作する軽量なレイヤーを作成したのです。

通常のライブラリの主な問題点

ほとんどのスムーズスクロールツールは標準スクロールを単に「無効化」し、transform（CSS transform）を通じてそれを模倣しようとします。これにより、キーボードフォーカス、ページ検索（Cmd+F）、スクリーンリーダーの機能などが壊れてしまいます。

Lenis（ラテン語で「スムーズ」の意）はネイティブスクロールを維持します。つまり、anchor linksが機能し、ブラウザはユーザーがページ上のどこにいるかを正確に理解したままです。さらに、このライブラリは数キロバイトのみで、依存関係の山を引っ張ってこないのも利点です。

Lenisできること

このライブラリはフロントエンド開発者の複数のペインポイントに一度に対応します。

WebGLやアニメーションとの同期

複雑なパララックス効果を作成したり、スクロールをキャンバス（WebGL）にバインドする場合、スクロール位置の単一の情報源が必要です。LenisはGSAP ScrollTriggerと完璧に連携します。私の経験では、高速スクロール中に要素が「ジッター」するのを避ける最も安定した方法です。

あらゆる軸での動作

垂直、水平、またはネストされたスクロールの滑らかさを設定できます。後者は特に便利です。多くの場合、メインのページはスムーズにスクロールしながら、内部のモーダルブロックは独自の動きを持つ必要があります。

フレームワークサポート

このようなものにはバニラJSを好みますが、プロジェクトにはReact、Vue、さらにはFramer用の公式アダプターがあります。これにより、refsやコンポーネントライフサイクル管理の受け渡しの時間が節約できます。

始め方

インストールは標準通りです：

npm i lenis

基本的な初期化はできるだけシンプルです。自動アニメーションループ（autoRaf）を有効にすると、手動でrequestAnimationFrameを弄る必要がなくなります：

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

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

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

GSAPを使用している場合（クールなサイトには事実上の標準です）、統合はもう少し複雑ですが、より信頼性が高くなります：

const lenis = new Lenis();

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

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

gsap.ticker.lagSmoothing(0);

微細な点と制限事項

Lenisは優れていますが、癖があります。例えばSafariでは、フレームレートの更新が60FPS（低電力モードでは30FPS）に制限される場合があり、高リフレッシュレートモニターで気づかれることがあります。

もう1つの点はiframeです。iframe内のスクロールはスムーズにならず、マウスホイールイベントが外部にバブリングされないためです。これはブラウザのセキュリティ制限であり、ライブラリでは対処できません。

ページに通常スクロールする必要がある要素（テキストフィールドやドロップダウンなど）がある場合、data-lenis-prevent属性を使用してください。これにより、おかしなインターフェース動作を回避できます。

実装する価値があるか

ランディングページ、ポートフォリオ、美観が重要なプロモサイトを作成している場合、確かにそうです。Lenisはアクセシビリティを損なうことなく、その「高級」な効果を与えてくれます。

テーブルが多い重量級ダッシュボードや管理パネルの場合、おそらく控えた方が良いでしょう。そこでは、スクロールの上に追加の抽象化レイヤーが、ユーザーがデータを素早くナビゲートするのを妨げるだけです。

全体として、今日このクラスで最もクリーンでパフォーマンスの高いツールの1つです。ショーケースをチェックしてください。通常のスクロールがビジュアルストーリーテリングの一部になる、見事な例があります。