【CSSのみ】表示領域へピタッと移動する方法！スクロールスナップの実装

今回はスクロールスナップの実装についてまとめておきます。

スクロールスナップとは

ページをスクロールしているときに、見せたいエリアを表示させる方法です。

実装されているサイト

このLPは、私が作成した簡易LPです。

ex cafe のサイト

口当たりのいい飲み物と素材にこだわった食べ物のカフェ

ex.outputsonson.com

このブログ内でもスクリーンショットを公開しています。

【コーディング】Cafeサイト

cafeサイトのコーディングを行いました。 LP SP URL ポイント スクロールの停止位置を「スクロールスナップ」で指定

blog.outputsonson.com

2021.04.19

実装

実際にスクロールスナップを実装していきましょう。

今回は下記のようなものを作成します。

試しにスクロールしてみてください。

See the Pen
scroll-snap by そんそん@プログラミング勉強中 (@sonsonfinal)
on CodePen.

HTML

<div　class="container">

　<section　class="section-1">
　　<h1>1</h1>
　</section>

　<section　class="section-2">
　　<h2>2</h2>
　</section>

　<section　class="section-3">
　　<h2>3</h2>
　</section>

</div>

.container {
　overflow: auto;
　scroll-snap-type: y mandatory; /* ① */
　height: 100vh;
}


section {
　height: 100vh;　/* ② */
　scroll-snap-align: start; /* ③ */
　font-size: 10rem;
　text-align: center;
}


.section-1 {
　background: pink;
}



.section-2 {
　background: red;
}



.section-3 {
　background: skyblue;
}

スクロールする軸の指定　①に関して

高さの指定　②に関して

親要素のどの位置で停止させるか　③に関して

まとめ

• スクロールさせる軸
• 高さの指定
• どの位置で停止させるか

以上、参考になれば幸いです。

ご覧いただき、ありがとうございました。