Scroll Snap

画面領域を固定

スクロールすると、各エリアでピタッと止まる！！CSSだけで実装できる。

練習用ファイルをダウンロード

 

ポイント

スクロールスナップさせるために高さを 100vh にすることで画面領域いっぱいに広げて、フルスクリーンレイアウトとして表示できます。

（例）
.container {
overflow: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.area {
scroll-snap-align: start;
height: 100vh;
}

どの軸でスクロールさせるか
scroll-snap-type プロパティーではスクロール位置を調整する軸を決定します。
値を y はたて方向、 x は横方向にスクロールさせ、ピタッと止める位置を調整します。また、both にすれば縦にも横にも調整可能です。

練習ページではスナップスクロールのCSSは設定済みです。

01 設定の確認

親となる全体の要素にはscroll-snap-typeプロパティで「y mandatory」を指定します。
機能させるにはoverflowプロパティで「scroll」の指定と、必要なコンテンツの高さが必要です。

一度に表示する領域のボックスにはscroll-snap-alignプロパティで「start」を指定します。
必要なコンテンツの高さが必要です。

CSS

.container {
/* スクロールスナップの設定 */
overflow: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}

/* 領域各エリアいっしょに設定*/
.area1,.area2,.area3,.area4 {
padding: 1rem;

/* テキストを画面中央に表示 */
display: flex;
flex-direction: column;
justify-content: center;

/* スクロールスナップの設定 */
scroll-snap-align: start;
height: 100vh;
}



02 Google font

h1のフォントはGoogleフォントを使用しています。
自分の好きなフォントに変更してみよう。
使い方はこちら（WEBフォントを使ってみよう）



03 各エリアに画像を設定

各エリアはバックグラウンドカラーを指定しています。
①まずは用意されたph1～ph4.jpg画像を入れてみよう。
②次は画像をダウンロードして入れ替えてみよう。画像サイズ1280pxを選んでください。

Point：background-size: cover;

.area1 {
background-color: #ffe4e1;
background-image: url(img/ph1.jpg);
background-size: cover;
}
.area2 {
background-color: #f6ae54;
background-image: url(img/ph2.jpg);
background-size: cover;
}

.area3 {
background-color: #d9aacd;
background-image: url(img/ph3.jpg);
background-size: cover;
}
.area4 {
background-color: #f5f5f5;
background-image: url(img/ph4.jpg);
background-size: cover;
}