スクロール吸着 生成

機能

• 4 つの方向：横・縦・両方向・ブロック方向
• 3 つの揃え位置：先頭・中央・末尾
• ⚠️ `proximity` と `mandatory` の違いを明記し、`mandatory` が長い内容に与える影響も説明
• ⚠️ 2 つのプロパティが必要なことを明記：`scroll-snap-type` はコンテナ、`scroll-snap-align` は子要素。片方ではエラーも出ません
• プレビューはそのままドラッグできます
• 縦方向ではコンテナに自動で高さが付きます（高さがないとスクロールできません）
• コピーできるのはコンテナと子要素の 2 ブロック。セレクターを変えるだけ

使い方

1. 吸着する方向と揃え位置を選びます
2. 下のブロックをドラッグして吸着を確認します
3. コードをコピーし、コンテナと子要素の 2 ブロックを自分の構造に当てはめます

よくある質問

scroll-snap-type を書いても効かないのはなぜですか？

多くの場合もう半分が足りていません。スクロール吸着はコンテナと子要素の組み合わせが必要です：`scroll-snap-type` はスクロールするコンテナに、`scroll-snap-align` は吸着させたい各子要素に書きます。コンテナ側だけではスクロールは完全に正常 —— つまり普通のスクロールです。これが追いにくい理由です：エラーは出ず、どちらのプロパティも単体では正しく、症状は「何も起きない」だけです。もう 1 つのよくある原因は、コンテナにスクロールする余地がないことです（内容がコンテナより短い、あるいはコンテナにサイズがない）。その場合は吸着する対象自体がありません。

mandatory と proximity はどちらを選ぶべきですか？

既定は `proximity` です。 `mandatory` は「必ず吸着点で止まる」と約束しますが、内容がコンテナより長いとブラウザーが強制的に引き戻すため、途中までスクロールして離すと弾き返され、中間の内容が見られません。画面にはまだ先があると伝えるものが何もありません。キーボード利用者も 1 項目ずつ飛びます。`mandatory` が安全で優れているのは、1 画面がちょうど 1 つの吸着項目になっている場合（カード 1 枚が画面を満たす典型的なカルーセル）だけです。

縦方向の吸着で高さを明示する必要があるのはなぜですか？

高さの制約がないブロックはスクロールしないからです —— 高さは内容が決めるので常に内容の高さと等しく、スクロールする余りがありません。横方向も理屈は同じです（幅がなければ右へ伸び続けます）。したがって縦方向の吸着はほぼ常に `height`（または `max-height`）を伴います。横より書き間違えやすいのはそのためです：横スクロールのコンテナは通常の文書フローで幅が自然に制約されますが、縦はそうではありません。

スクロール吸着はキーボード操作やスクリーンリーダーに影響しますか？

影響します。`mandatory` では特に顕著です。キーボード利用者が `PageDown` や方向キーでスクロールすると、強制吸着によって吸着点から吸着点へ飛んでしまい、間の内容が読めません。スクリーンリーダーは DOM 順に読むため吸着（視覚的なもの）の影響は受けませんが、視覚的な順序と読み上げの順序が食い違うこと自体が混乱を招きます。仕様には `scroll-snap-stop: always`（各吸着点で必ず止まる）という部分的な対策がありますが、長い内容には `proximity` に変えるほうが確実です。CSS はこの判断を代わりにしてくれません。

カルーセルはスクロール吸着と JavaScript のどちらで作るべきですか？

スクロール吸着を優先してください。 JavaScript 版がしばしば苦手なものを無料で提供します：トラックパッドやタッチ画面のネイティブな慣性、矢印キーでのスクロール、スクロールバー、そして「戻るボタンで前のスクロール位置に戻る」動作。しかもスクリプトがないので、スクリプトの読み込み失敗で機能全体が失われることもありません。JavaScript を足す価値があるのは追加の機能が必要なときだけです：自動再生、無限ループ、インジケーターと現在位置の同期、吸着完了時の処理など。その場合もまずスクロール吸着を土台にし、その状態をスクリプトから読むべきで、スクロールを自作すべきではありません。