水平スクロールスナップ

はじめに

この実験では、CSS における水平スクロールスナップの概念を探ります。この実験では、スクロール時に要素にスナップする水平スクロール可能なコンテナを作成する方法を案内します。scroll-snap-type プロパティと scroll-snap-align を使用してスナップエフェクトを作成する方法と、スナップの整列を制御する方法を学びます。この実験が終了するとき、スマートでユーザーフレンドリーな水平スクロールレイアウトを作成する方法を十分に理解しているでしょう。

水平スクロールスナップ

VM には既に index.html と style.css が用意されています。

スクロール時に要素にスナップする水平スクロール可能なコンテナを作成するには、次の手順に従います。

1. display: grid と grid-auto-flow: column を使用して水平レイアウトを作成します。
2. scroll-snap-type: x mandatory と overscroll-behavior-x: contain を使用して、水平スクロールに対するスナップエフェクトを作成します。
3. scroll-snap-align を start、stop、または center に変更して、スナップの整列を調整します。

以下は使用できる HTML と CSS のコードの例です。

HTML

<div class="horizontal-snap">
  <a href="#"><img src="https://picsum.photos/id/1067/640/640"></a>
  <a href="#"><img src="https://picsum.photos/id/122/640/640"></a>
  <a href="#"><img src="https://picsum.photos/id/188/640/640"></a>
  <a href="#"><img src="https://picsum.photos/id/249/640/640"></a>
  <a href="#"><img src="https://picsum.photos/id/257/640/640"></a>
  <a href="#"><img src="https://picsum.photos/id/259/640/640"></a>
  <a href="#"><img src="https://picsum.photos/id/283/640/640"></a>
  <a href="#"><img src="https://picsum.photos/id/288/640/640"></a>
  <a href="#"><img src="https://picsum.photos/id/299/640/640"></a>
</div>

CSS

.horizontal-snap {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  height: calc(180px + 1rem);
  padding: 1rem;
  max-width: 480px;
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

.horizontal-snap > a {
  scroll-snap-align: center;
}

.horizontal-snap img {
  width: 180px;
  max-width: none;
  object-fit: contain;
  border-radius: 1rem;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは水平スクロールスナップの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。