【HTML,CSS】WEBサイトを指定の要素でピタッと止める方法

2023年4月10日 2023年4月10日

Ryouji

WEBサイト（LPみたいなページ）で、スクロールした時に指定の画面でピタッと要素を止めたい。そんなやり方について知ったので、備忘録として記載しておこうと思います。

ちなみに、こんな感じの画面を遊びながら作っていました。

制作物

WEBページそのものはこちら

このようなページで、マウスで動かしたり、スマホのスワイプをすると↓

次の画面でピタッと止まる。

こんなことが出来るCSSについて書いています。

どうやって実装するか？

上述したサイトからコードを持ってきてます。

まずはHTMLの構造。containerクラスの中に、section(areaクラス）を複数配置してます。

	<body>
        <div class="container">
          <section class="area">
　　　　　　　　・・・（詳しい中身を作る）
          </section>
          
          <section class="area">
　　　　　　　　・・・（詳しい中身を作る）
          </section>
          <section class="area">
　　　　　　　　・・・（詳しい中身を作る）
          </section>
        </div>
  <body>

CSSの構造

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

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

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

サンプルコードはsection(areaクラス）の上部パーツごとにスクロールが調整されるようになっています。

そして、そのCSSはザクっと以下の感じです。

scroll-snap-type: y mandatory;
　→スクロールした時に、y軸（縦方向に）要素に合わせてピタッと止める。
　→ yをxに変えると横方向にピタッと止まる
　→　
scroll-snap-align: start;
　→　ピタッと止める要素の位置を決める。
　→　startだと、要素の始まりの部分(ｙで設定すると、要素の上部分）でいい感じにスクロールがとある。
scroll-snap-align: start;
　→　ピタッと止める要素の位置を決める。
　→　startだと、要素の始まりの部分(ｙで設定すると、要素の上部分）でいい感じにスクロールがとある。