CSS - scroll-snap-type

概要

属性名 scroll-snap-type
値 none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
初期値none
適用可能要素すべての要素
継承しない
サポートhttps://caniuse.com/?search=scroll-snap-type

説明

スクロールする際にスクロール位置がスナップ領域に合わせて調整されます。使用例を参照してください。スクロールさせると、各セクションの先頭がスクロールの先頭になるように調整(スナップ)されます。

値説明
noneスナップしません。
xX軸方向のみスナップします。
yY軸方向のみスナップします。
blockブロック方向(横書きの場合はY軸方向、縦書きの場合はX軸方向)のみスナップします。
inlineインライン方向(横書きの場合はX軸方向、縦書きの場合はY軸方向)のみスナップします。
bothX軸・Y軸両方向でスナップします。
mandatory強制的にスナップします。
proximityスナップすることを指示しますが強制的ではありません。

使用例

CSS
.snap-container {
  height: 10rem;
  width: 20rem;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.snap-content {
  height: 15rem;
  background-color: #ddd;
  scroll-snap-align: start;
}
HTML
<div class="snap-container">
  <section class="snap-content">
    <h5>Section-1</h5>
  </section>
  <section class="snap-content">
    <h5>Section-2</h5>
  </section>
  <section class="snap-content">
    <h5>Section-3</h5>
  </section>
</div>
表示

Section-1

Section-2

Section-3

関連項目

scroll-snap-align

リンク

Copyright (C) 2022 杜甫々
初版：2022年8月21日、最終更新：2022年8月21日
https://www.tohoho-web.com/css/prop/scroll-snap-type.htm