CSS スクロール連動UI 2026年最新仕様と実装プロンプト作例

ブラウザがCSSスクロール連動を本気でサポートし始めた

2026年春、Chrome 120以降でScroll-Driven Animations（通称SDA）が安定し、FirefoxやSafariも部分的に追随し始めた。さらに@scroll-timelineの代替としてscroll()／view()関数が採用され、開発者はCSSでスクロール進行度を直接アニメーション時間にマッピングできる。View Transitionsも単なるページ遷移エフェクトから、スクロール位置を保持したまま要素を跨ぐクロスドキュメント遷移へ進化。Scroll States（:scroll-active、:scroll-boundary、:scrolled）疑似クラスはついにスクロール状態をCSS onlyで判定可能にした。

これらを組み合わせれば、パララックスや粘着的ヘッダーの色変更、無限水平カルーセルをJavaScriptなしで実装できる。単なるトレンドではなく、ブラウザエンジンがCSSにスクロールという「時間軸」を与えた点で、Webインターフェース設計のパラダイムシフトといえる。

Scroll-Driven Animationsの実装パターン

animation-timelineプロパティにscroll()を指定するだけで、スクロール量に応じたアニメーションが動く。具体的には、animation-timeline: scroll(nearest block)と記述。スクロール位置0%でアニメーション開始、100%で終了。ビューポート内での要素の可視割合に対して発火させたい場合はview()を使う。animation-rangeで発火区間の調整も可能。

例えば、プログレスバーをページ最下部までスクロールすると100%になるよう制御したい：

@keyframes progress { from { width: 0%; } to { width: 100%; } }
.progress-bar {
  animation: progress 1s linear;
  animation-timeline: scroll(nearest block root);
}

従来はIntersectionObserverとrequestAnimationFrameを組み合わせて実装していた。CSS完結で済むため、メインスレッド負荷が大幅に下がる。ただし、animation-timelineに対応していないブラウザがまだあるため、@supportsでフォールバックを用意する必要がある。

View Transitions: クロスドキュメント遷移の現在地

CSS-Tricksの解説記事でも触れられている通り、View Transitionsは同一ドキュメント内のDOM変化に加え、異なるページ間の遷移にも対応しつつある。@view-transitionアットルールで遷移タイプを定義し、::view-transition-old()／::view-transition-new()で新旧状態のスタイルを制御。特にSPAライクな体験をMPA（Multi-Page Application）で実現できる点が注目される。

注意点として、同一生成元（same-origin）かつ同一NavigationType（push/replaceなど）に限定される。また、遷移の途中でユーザーがスクロールするとアニメーションが破綻するケースがあるため、scroll-behavior: smoothとの組み合わせで調整が必要。

Scroll States: CSSだけでスクロール位置を検知

:scroll-active疑似クラスはユーザーが能動的にスクロールしている間のみ適用。:scroll-boundaryは要素がスクロールコンテナの境界に達したとき、:scrolledは一度でもスクロールが行われた要素にマッチする。これにより、position: stickyと組み合わせたヘッダーの色変更や、スクロール可能領域の端に達したときの「もっと見る」UI表示をCSSだけで行える。

実装上の落とし穴として、:scroll-activeはマウスホイールやトラックパッドの慣性スクロール中のみ有効。タッチデバイスでは指を離した瞬間に外れるため、transitionの遅延をかけて滑らかにする工夫が要る。

開発者視点で押さえるべき移行戦略

まず、どのAPIが2026年4月のBaselineに含まれているか確認する。Scroll-Driven AnimationsはChrome 120以降で利用可能だが、Safari 18.1で部分対応、Firefox 127でもフラグ付き。View TransitionsはChrome 111でリリース済みだが、クロスドキュメント版はChrome 128以降。Scroll StatesはChrome 130以降で動作。プロダクション投入には@supportsとpolyfill（例：scroll-timeline-polyfill）の併用が現実的。

加えて、パフォーマンス面ではanimation-timelineがGPUコンポジットを活用するため、従来のJS実装よりFPSが安定する。ただし、複数のスクロール駆動アニメーションを同時発火させるとレイアウトスラッシングが発生しうる。コンテンツのwill-change: transform指定や、contain: layoutで範囲を限定するとよい。

最後に、これらの新機能を組み合わせた高度なUI例として、スクロール位置に応じて色が変わるナビゲーションバー、ビューポートに入った要素にフェードイン効果、ページ遷移時にスクロール位置を保持したままコンテンツをスワイプする体験などが挙げられる。CSS-Tricksの別記事にあるCSSのみ円グラフも、スクロール駆動でパーセンテージを動的に変える応用が可能だ。

ブラウザ間の対応差は依然あるが、2026年後半には主要3ブラウザで3機能すべてがデフォルト有効になると予想される。今のうちにプロトタイプを作り、移行コストを見積もっておく価値は大きい。

参照

• New to the web platform in May (web.dev)
• April 2026 Baseline monthly digest (web.dev)
• New to the web platform in April (web.dev)
• Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions (CSS-Tricks)
• Another Stab at the Perfect CSS Pie Chart… Sans JavaScript! (CSS-Tricks)