scroll-stateとは？CSSだけで現在スナップ中の要素を検知する最新テクニック

2月 20, 2026 2月 20, 2026

こんにちは。静岡県浜松市でWEBデザイナーをしています小瀧です。
カルーセルや横スクロールUIを作るとき、これまで当たり前のように書いていた処理があります。

「今どの要素が表示されているかを判定するJavaScript」です。

スクロールイベントを監視し、位置を計算し、インデックスを算出してクラスを付け替える。
実装も少し面倒ですし、パフォーマンス面の配慮も必要でした。

しかし今、CSSだけでそれが可能になりつつあります。

scroll-stateを使えば、「現在どの要素にスナップしているか」をCSSが直接検知できます。
カルーセルの「現在表示中の要素だけハイライト」も、JavaScript不要で実装可能です。

今回はこの新しい仕組みについて、実務目線で整理していきます。

scroll-stateとは

scroll-stateは、スクロールコンテナ内の要素が「どの状態にあるか」をCSSで検知できる仕組みです。

特に相性が良いのがscroll-snapと組み合わせたレイアウトです。

scroll-snapを使えば、スクロール時に要素がピタッと止まるUIを作れます。
scroll-stateは、その「今スナップしている要素」をCSSで判定できるのです。

従来の実装はこうでした。

scroll-stateを使えば、これらが不要になります。

UI状態をCSSだけで完結できるのが最大の強みです。

まずはコンテナにscroll-snapを設定します。

<div class="carousel">
　<div class="item">1</div>
　<div class="item">2</div> 
　<div class="item">3</div> 
</div>

CSSは以下のように記述します。

 
.carousel { 
　display: flex; 
　overflow-x: auto; 
　scroll-snap-type: x mandatory; 
} 
.item { 
　flex: 0 0 100%; 
　scroll-snap-align: center; 
}

ここまでは従来のscroll-snap実装です。

scroll-stateを使うと、スナップ中の要素に対してスタイルを当てられます。

 
.item:scroll-state(active) { 
　transform: scale(1); 
　opacity: 1; 
} 
.item { 
　transform: scale(0.9); 
　opacity: 0.5; 
　transition: 0.3s; 
}

これにより、現在スナップ中の要素だけが拡大表示されます。

JavaScriptによるクラス制御は一切不要です。

scroll-stateは次のような場面で強力です。

特に「現在地の視覚化」が必要なUIでは、コード量を大幅に削減できます。

scroll-stateはまだ発展途上の仕様です。

そのため、本番導入時は段階的適用が現実的です。

scroll-stateは、スクロール連動UIの設計を大きく変える可能性を持っています。

これまでJavaScriptで制御していた「現在表示中要素の判定」が、CSSだけで完結する。
実装はシンプルになり、パフォーマンスも改善されます。

スクロール演出を多用するサイトを制作している方にとっては、間違いなくチェックすべき機能です。
CSSの進化は、まだまだ止まりません。

この記事を書いた人

静岡県浜松市在住のフリーランスWEBデザイナー小瀧です。サイト制作、デザイン制作、SEO対策等も行っています。お気軽にお問い合わせください！業務委託も大歓迎です！