CSS で垂直スクロールスナップをマスターする

はじめに

この実験では、CSS プログラミングの世界に突入し、そのさまざまな機能や機能性を探ります。この実験の目的は、CSS を使って視覚的に魅力的で応答性のある Web ページを作成するための必要なスキルを学習者に備えさせることです。実践的な練習と実験を通じて、学習者は CSS の構文、セレクター、プロパティなどをしっかりと理解するようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

垂直スクロールスナップ

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

このコードは、スクロール中に要素にスナップするスクロール可能なコンテナを作成します。この効果を実現するために、以下の手順がとられます。

display: grid と grid-auto-flow: row を使って垂直レイアウトを作成します。
scroll-snap-type: y mandatory と overscroll-behavior-y: contain を使って垂直スクロール時のスナップ効果を作成します。
scroll-snap-align に start、stop、または center を指定することで、スナップの位置合わせを変更できます。

以下が HTML と CSS のコードです。

<div class="vertical-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>

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

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

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

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

まとめ

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