1. >
  2. >
  3. スライダーとかスクロールでピタッと止まって欲しい!scroll-snap-typeってなに

スライダーとかスクロールでピタッと止まって欲しい!scroll-snap-typeってなに

スライドのイメージ

スクロールがピタッと止まる

感動してしまったので、備忘録的な感じでメモ。
cssでできるんだね、jsとか必要だと思っていたけど、cssのscroll-snap-typeを使えばOK

HTML

 
<div class="container">
  <section class="area">
    <h2>ここでとまる</h2>
    <p>1</p>
  </section>
  <section class="area">
    <h2>ここでとまる</h2>
    <p>2</p>
  </section>
  <section class="area">
    <h2>ここでとまる</h2>
    <p>3</p>
  </section>
  <section class="area">
    <h2>ここでとまる</h2>
    <p>4</p>
  </section>
  <section class="area">
    <h2>ここでとまる</h2>
    <p>5</p>
  </section>
</div>

css

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

body {
  font-size: 4rem;
  text-align: center;
  color: #fff;
}
h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}
.area:nth-child(even) {
  background-color: #0db;
}
.area:nth-child(odd) {
  background-color: #0bd;
}

縦の時は方向をyにしたらいいけど、スライダーとかで横にスクロールするときはscroll-snap-typeを 「x」にするだけ。
めちゃ便利!

今まで調べようともしていなかったので、気持ち悪いところで止まってしまっても仕方ないと思っていたけど、これ意外と知ってるだけで細かいところきれいな装飾できるかも。

参考にさせて頂いたサイト

表示領域にピタッと移動!CSSでスクロールスナップを実装しよう | Webクリエイターボックス

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る