scroll-snap 種別

このツールでできること

• scroll-snap 種別では、scroll-snap-type で使う none、mandatory、proximity と x/y/both 軸を一覧確認できます。
• 関連する観点として scroll-snap 種別、scroll snap types、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. Item 列で none、mandatory、proximity の強さに関する値を確認します。
2. axis x と axis y の行で、水平方向と垂直方向の指定を見分けます。
3. both 行で、両方向にスナップを効かせる値を確認します。
4. 実際の CSS では x mandatory のように、軸と強度を組み合わせて親コンテナへ指定します。

入力例・出力例

よくある利用シーン

• スクロールを必ず停止点へ寄せるか、近い時だけ寄せるか決めたいとき。
• 横・縦・両軸のどれに snap を効かせるか整理したいとき。
• scroll-snap-align の前に、親コンテナ側の type 値を確認したいとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• scroll-snap 種別、scroll snap types、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• scroll-snap 種別の主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール