CSS scroll-snap-type 属性

定義と使用法

scroll-snap-type 要素がスクロールを停止した際にどのように焦点に吸着し、どの方向に吸着するかを指定する属性です。

スクロールアドヒシブ効果を実現するには、親要素に設定する必要があります。 scroll-snap-type 属性を設定し、子要素に scroll-snap-align 属性。

例

例1

x軸にスクロールアドヒシブ機能を設定します：

#container {
  scroll-snap-type: x mandatory;
}

実際に試してみてください

例2：x軸とy軸にアドヒシブ効果を設定する

x軸とy軸にアドヒシブ効果を設定します。 scroll-snap-type 属性：

#container > div {
  scroll-snap-type: both mandatory;
}





実際に試してみてください

例3：近接性のあるアドヒシブ効果

x軸とy軸に近接性のあるスクロールアドヒシブ効果を設定します。 scroll-snap-type 属性。この属性値を使用する場合、スクロール操作が2つの要素の中央に止まった場合、アドヒシブ効果は行われません：

#container > div {
  scroll-snap-type: both proximity;
}





実際に試してみてください

CSS文法

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

属性値

値 説明
none スクロールアドヒシブ効果がありません。デフォルト値。
x x軸にスクロールアドヒシブ効果を設定します。
y y軸にスクロールアドヒシブ効果を設定します。
block ブロック方向にスクロールアドヒシブ効果を設定します。
inline 行方向にスクロールアドヒシブ効果を設定します。
both x軸とy軸にスクロールアドヒシブ効果を設定します。
mandatory スクロール操作が完了した後、スクロールは自動的にアドヒシブポイントに移動します。
proximity

mandatoryと似ていますが、より厳しくはありません。

スクロール操作が完了した後、スクロールは自動的にアドヒシブポイントに移動しますが、アドヒシブポイント間にはアドヒシブ効果がないエリアがあります。

ブラウザのパラメータによって異なります。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性は親要素から継承されます。参照してください inherit。

技術的詳細

デフォルト値： none
継承性： いいえ
アニメーション作成： サポートしていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript文法： object.style.scrollSnapType="x mandatory"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 56.0

関連ページ

参照：CSS scroll-snap-align 属性