CSS - scroll-snap-type

概要

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

説明

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

値	説明
none	スナップしません。
x	X軸方向のみスナップします。
y	Y軸方向のみスナップします。
block	ブロック方向(横書きの場合はY軸方向、縦書きの場合はX軸方向)のみスナップします。
inline	インライン方向(横書きの場合はX軸方向、縦書きの場合はY軸方向)のみスナップします。
both	X軸・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

リンク

初版：2022年8月21日、最終更新：2022年8月21日

https://www.tohoho-web.com/css/prop/scroll-snap-type.htm

CSS - scroll-snap-type

概要

説明

使用例

Section-1

Section-2

Section-3

関連項目

リンク