概要

scroll-snap-typeは、CSSのプロパティで、スクロール時に要素が特定の位置でピタッと固定されるように設定するためのものです。このプロパティを使うと、ユーザーがスクロール操作をした際に、スクロールの終了位置が要素のスナップポイントに調整されるため、スムーズで直感的な操作感を提供できます。ギャラリーやカルーセル、商品リストなど、視覚的に整ったデザインに最適です。

基本的な使い方

scroll-snap-typeは、親コンテナに設定してスクロール方向とスナップの強度を指定します。子要素にはスナップポイントを設定するためのscroll-snap-alignプロパティを組み合わせて使用します。

構文

.container {
  scroll-snap-type: [軸] [スナップ強度];
}
  • 軸:
    • x
      横方向にスナップ。
    • y
      縦方向にスナップ。
    • block
      ブロック方向にスナップ（縦書きなら横方向）。
    • inline
      インライン方向にスナップ（横書きなら横方向）。
    • both
      縦横両方向にスナップ。
  • スナップ強度:
    • mandatory
      強制的にスナップ。
    • proximity
      スナップに近い位置でのみスナップ。

例

以下の例では、scroll-snap-typeを使用して、横方向にスクロールするギャラリーが、各画像でピタッと止まるようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Snap Type Example</title>
<style>
  .scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ccc;
  }
  .snap-item {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 200px;
    height: 150px;
    background-color: #007bff;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }
</style>
</head>
<body>
<div class="scroll-container">
  <div class="snap-item">1</div>
  <div class="snap-item">2</div>
  <div class="snap-item">3</div>
  <div class="snap-item">4</div>
  <div class="snap-item">5</div>
</div>
</body>
</html>

このコードでは、.scroll-containerクラスにscroll-snap-type: x mandatory;を設定し、横方向の強制スナップを有効にしています。.snap-itemにはscroll-snap-align: start;が設定されているため、スクロール時に各アイテムがコンテナの左端でピタッと固定されます。

scroll-snap-typeの利点

  • スムーズなユーザー体験: スクロール時に要素が自動的にスナップするため、ユーザーが情報を見逃さずに済みます。
  • 視覚的に整ったレイアウト: 要素が指定した位置で止まるため、整った見た目を維持できます。
  • ギャラリーやカルーセルに最適: 商品リストやフォトギャラリーなどで、ユーザーが直感的に操作できるインターフェースを提供します。
  • レスポンシブ対応: スクロールスナップは、さまざまなデバイスにおいて一貫したユーザー体験を提供します。

応用例

縦方向のスナップリスト

以下の例では、縦方向にスナップするリストを作成します。縦スクロールするコンテンツで、項目ごとにスクロールが止まるように設定できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Scroll Snap Example</title>
<style>
  .vertical-container {
    height: 300px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    border: 1px solid #ccc;
    padding: 10px;
  }
  .snap-item {
    scroll-snap-align: start;
    height: 100px;
    background-color: #28a745;
    color: #fff;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
</style>
</head>
<body>
<div class="vertical-container">
  <div class="snap-item">Item 1</div>
  <div class="snap-item">Item 2</div>
  <div class="snap-item">Item 3</div>
  <div class="snap-item">Item 4</div>
  <div class="snap-item">Item 5</div>
</div>
</body>
</html>

この例では、.vertical-containerにscroll-snap-type: y mandatory;を設定し、縦方向に強制スナップを有効にしています。スクロールすると各項目がコンテナの上端でピタッと止まります。

近接スナップでの自然なスクロール

scroll-snap-type: proximity;を使用すると、要素がスナップポイントに近い場合にのみスナップするため、より自然なスクロール体験が得られます。

.scroll-container {
  scroll-snap-type: x proximity;
}

proximityを設定すると、ユーザーが自らスクロールを制御しやすく、強制感のない自然な操作感を提供します。

まとめ

scroll-snap-typeは、ユーザーに快適で直感的なスクロール体験を提供するための強力なCSSプロパティです。スクロール位置をピタッと固定することで、整ったレイアウトと高いユーザー満足度を実現します。さまざまな用途に応用できるため、ウェブサイトのデザインにぜひ取り入れてみてください。

参照:

scroll-snap-type - MDN Web Docs