CSS scroll-snap-stop 属性

定義と使用方法

タッチパッドやタッチスクリーンで速くスライドしたときに、scroll-snap-stop 属性は、スクロールが要素を直接スキップするか、停止して次の要素にアタッチするかを指定します。

スクロールアタッチメント停止動作を制御するには、子要素に scroll-snap-stop および 前のページ 属性、および親要素に scroll-snap-type 属性。

注意：タッチパッドやタッチスクリーンを持つデバイスでスライド手势を使用して、この属性の体験をすることができます。 scroll-snap-stop 属性の効果。

例

タッチパッドやタッチスクリーンで速くスライドしたとき、スクロールを強制的に停止し、次の要素に固定し、要素をスキップするのではなく：

div {
  scroll-snap-stop: always;
}

自分で試してみてください

CSS文法

scroll-snap-stop: normal|always|initial|inherit;

属性値

値 説明
normal デフォルト値。タッチパッドやタッチスクリーンで速くスライドした後、スクロールは緩やかに減速し、複数の要素をスキップします。
always タッチパッドやタッチスクリーンで速くスライドした後、スクロールが停止し、次の要素にフォーカスが固定されます。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit この属性は親要素から継承されます。参照してください： inherit。

技術的詳細

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

ブラウザのサポート

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

クローム エッジ ファイアフォックス サファリ オペラ
75.0 79.0 103.0 15.0 15.0

62.0

関連ページCSS scroll-snap-align 属性

関連ページCSS scroll-snap-type 属性