css
投稿日
投稿者 dennie

【CSS】スナップ

スナップを使用すると、画像をスワイプすると中途半なところで止まらず、ちょうど良いところで止まるような動きをさせる事が出来ます。

スナップとは

スナップを使わない場合

スナップを使わないとスワイプするような動きの場合、中途半端なところで止まってしまいます。
例えば、横にスクロールすると画像が見れるようなスライダーがあるとします。
スクロール(スワイプ)量によって、複数の画像が中途半端に表示される場合があります。

HTML

<div class="section">
    <div><img src="https://placehold.jp/350x150.png"></div>
    <div><img src="https://placehold.jp/350x150.png"></div>
    <div><img src="https://placehold.jp/350x150.png"></div>
    <div><img src="https://placehold.jp/350x150.png"></div>
    <div><img src="https://placehold.jp/350x150.png"></div>
</div>

CSS

.section {
  display: flex;
  overflow-x: auto;
  width: 480px;
  gap: 10px;
  outline: red 2px solid;
}

結果

スナップを使う場合

スワイプすると要素(画像)が必ず定位置で止まります。

HTML

<div class="section">
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
</div>

CSS

.section {
  display: flex;
  overflow-x: auto;
  width: 480px;
  gap: 10px;
  outline: red 2px solid;
  scroll-snap-type: x mandatory;
}

.item {
  scroll-snap-align: start;
}

結果

スナップ枠の設定

スクロール枠(親要素)についてスナップの設定が行えます。

scroll-snap-type

scroll-snap-type プロパティを指定すると、スクロール軸とスクロールの位置を調整出来ます。

スクロール軸

縦スクロール、横スクロールかを指定します。

scroll-snap-type: x

横軸の指定。先述の通りなので割愛します。

scroll-snap-type: y

縦軸の指定。

HTML

<div class="section">
    <div class="item"><img src="https://placehold.jp/300x150.png"></div>
    <div class="item"><img src="https://placehold.jp/300x150.png"></div>
    <div class="item"><img src="https://placehold.jp/300x150.png"></div>
    <div class="item"><img src="https://placehold.jp/300x150.png"></div>
    <div class="item"><img src="https://placehold.jp/300x150.png"></div>
</div>

CSS

横スクロールさせる為に overflow-y を指定します。

.section {
  overflow-y: auto;
  width: 300px;
  height: 400px;
  outline: red 2px solid;
  scroll-snap-type: y mandatory;
}

.item {
  scroll-snap-align: start;
  margin-bottom: 10px;
}

結果

スクロール位置調整

位置調整には、mandatory、proximity を指定します。

scroll-snap-type: mandatory

mandatory を指定すると現在表示しているエリアの固定位置か、次のエリアの固定位置を表示します。

HTML

<div class="section">
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
</div>

CSS

.section {
  display: flex;
  overflow-x: auto;
  width: 480px;
  gap: 10px;
  outline: red 2px solid;
  scroll-snap-type: x mandatory;
}

.item {
  scroll-snap-align: start;
}

結果

どのスクロール位置でも、固定位置で表示されます。今回の例の固定位置は画像の先頭になります。なので必ずスクロール枠の左端に画像の先頭が表示されます。

scroll-snap-type: proximity

proximity を指定すると固定位置が近い場合、近い固定位置を表示し、中間地点のような固定位置から遠い場所の場合、その位置で止まります。

HTML

<div class="section">
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
</div>

CSS

.section {
  display: flex;
  overflow-x: auto;
  width: 480px;
  gap: 10px;
  outline: red 2px solid;
  scroll-snap-type: x proximity;
}

.item {
  scroll-snap-align: start;
}

結果

スクロール位置を画像の中央にするとその位置に留まります。スクロール位置が固定位置に近い場合、スクロール位置が固定位置まで移動します。

スナップ要素の設定

今までは、親要素(スクロール枠)への設定でしたが、スクロール内の要素についても指定が可能です。

scroll-snap-align

scroll-snap-align プロパティを指定すると子要素の固定位置を指定出来ます。

要素の開始位置 – start

固定位置は要素の開始位置になります。先述の通りなので割愛します。

要素の中央位置 – center

固定位置は要素の中央位置になります。

HTML

<div class="section">
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
</div>

CSS

.section {
  display: flex;
  overflow-x: auto;
  width: 480px;
  gap: 10px;
  outline: red 2px solid;
  scroll-snap-type: x mandatory;
}

.item {
  scroll-snap-align: center;
}

結果

要素の終了位置 – end

固定位置は要素の終了位置になります。

HTML

<div class="section">
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
    <div class="item"><img src="https://placehold.jp/350x150.png"></div>
</div>

CSS

.section {
  display: flex;
  overflow-x: auto;
  width: 480px;
  gap: 10px;
  outline: red 2px solid;
  scroll-snap-type: x mandatory;
}

.item {
  scroll-snap-align: end;
}

結果

最後に

特にありません。

© DeNnie.Lab All Rights Reserved.