files/ja/web/css/css_scroll_snap/basic_concepts/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

---
title: CSS スクロールスナップの基本概念
slug: Web/CSS/CSS_Scroll_Snap/Basic_concepts
tags:
  - CSS
  - CSS スクロールスナップ
  - Guide
  - concepts
---
{{CSSRef}}

[CSS スクロールスナップ仕様書](https://drafts.csswg.org/css-scroll-snap-1/)は、ユーザーが文書をスクロールする際に、特定の位置にスクロールをスナップさせる方法を提供します。これにより、モバイルでも、デスクトップであっても、アプリのような操作感を実現することができます。

## スクロールスナップの基本

スクロールスナップ仕様の主要なプロパティは、{{CSSxRef("scroll-snap-type")}} と {{CSSxRef("scroll-snap-align")}} です。`scroll-snap-type` プロパティは、スクロールの種類と方向を指定するために、[スクロールコンテナー](/ja/docs/Glossary/Scroll_container)で使用されます。

`scroll-snap-align` プロパティは子要素で、スクロールがスナップする位置を設定するために使用する必要があります。以下の例では `y` 軸に沿ってスクロールをスナップさせるために、`scroll-snap-align` をセクション要素に使用してスクロールを停止する位置を指定しています。

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}

## scroll-snap-type の使用

{{CSSxRef("scroll-snap-type")}} プロパティは、スクロールスナップが発生する方向を指定する必要があります。これには `x` や `y`、論理マッピングの `block` や `inline` などがあります。また、キーワード `both` を使用すると、スクロールスナップが両軸で動作するようになります。

また、`mandatory` や `proximity` のキーワードを渡すこともできます。`mandatory` キーワードは、スクロールの位置に関係なく、コンテンツが特定の位置にスナップ*しなければならない*かどうかをブラウザーに伝えます。`proximity` キーワードは、その位置にスナップしてもよいが、しなくてもよいことを意味します。

`mandatory` を使用すると、とても一貫した操作感が得られます。つまり、ブラウザーは定義された各位置に必ずスナップすることがわかります。つまり、画面の上部にあると期待されるものが、スクロールが終了したときにあると確信できるのです。しかし、コンテンツが予想以上に大きい場合には、問題が発生する可能性があります。ユーザーは、スクロールしてもコンテンツの特定の位置を見ることができないという、もどかしい状況に陥るかもしれません。そのため、`mandatory` の使用は慎重に検討し、一度に画面に表示されるコンテンツの量が分かっている場合にのみ使用するようにしてください。

`proximity` の値は、近くにある場合にのみ位置にスナップしますが、正確な距離はブラウザーの判断に委ねられています。以下の例では、`mandatory` と `proximity` の間で値を変更し、スクロールの操作感に与える影響を確認することができます。

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}

## scroll-snap-align の使用

{{CSSxRef("scroll-snap-align")}} プロパティには、スクロールコンテナ内でコンテンツがスナップするポイントを示す、`start`、`end`、`center` の値を取ることができます。以下の例では、`scroll-snap-align` の値を変更することで、スクロールの動作がどのように変化するかを確認できます。

{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}

## スクロールコンテナーのパディング

スクロールコンテナーの端にコンテンツをスナップさせたくない場合は、{{CSSxRef("scroll-padding")}} プロパティまたはそれに相当する個別指定の値を使ってパディングを設定することができます。

以下の例では、`scroll-padding` を 40 ピクセルに設定しています。2 つ目と 3 つ目のセクションの開始点にスナップすると、スクロールはセクションの開始点から 40 ピクセル離れたところで止まります。`scroll-padding` の値を変更して、距離の変化を確認してみてください。

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}

これは、例えばナビゲーションバーなどの固定要素があり、スクロールしたコンテンツと重なってしまう場合に便利です。`scroll-padding` を使用すると、下の例のように、コンテンツがスクロールしても `<h1>` が画面上に残るように、見出しのための空間を確保することができます。パディングがないと、スナップが発生したときに見出しがコンテンツの一部と重なってしまいます。

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}

## スクロールの子のマージン

{{CSSxRef("scroll-margin")}} プロパティは、子要素に設定することができ、定義されたボックスの外側を定義することができます。これにより、子要素ごとに異なるスペースを確保することができ、親要素の `scroll-padding` と組み合わせて使用することができます。以下の例で試してみてください。

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}

## scroll-snap-stop プロパティ

{{CSSxRef("scroll-snap-stop")}} プロパティは、定義された各スナップ位置にスナップするかどうか — つまり上記の例では、それぞれのセクションの先頭で停止するか、またはセクションをスキップできるかどうか — をブラウザーに伝えます。このプロパティは、他の仕様に比べて実装しているブラウザーが少ないです。

このプロパティは、ユーザーがスクローラーの各セクションを確実に確認し、誤ってスキップしてしまわないようにするのに役立ちます。しかし、ユーザーが特定のセクションを探している場合、スクロールの速度が遅くなるという問題があります。

> **Note:** `scroll-snap-stop` プロパティは、現在の勧告候補の仕様ではリスクがあるとされているため、削除される可能性があります。

## ブラウザーの互換性

個々のプロパティページでは、スクロールスナップについてブラウザーの互換性の状況を詳しく説明しています。なお、Firefox 68 以前の Firefox は、古いバージョンの仕様を実装していました。新旧両方の仕様をサポートするクロスブラウザー対応のコードを書く方法の概要については、[次のガイドをお読みください](/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat)。