scroll-snap-points-x

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

scroll-snap-points-x は CSS のプロパティで、適用先のスクロールコンテナーの内容物におけるスナップ点の水平位置を定義します。

/* キーワード値 */
scroll-snap-points-x: none;

/* 反復スナップ点 */
scroll-snap-points-x: repeat(400px);

/* グローバル値 */
scroll-snap-points-x: inherit;
scroll-snap-points-x: initial;
scroll-snap-points-x: unset;

構文

値

none

スクロールコンテナーはスナップ点を定義しません。スクロールコンテナー内の要素は、スクロールコンテナーに代わってスナップ点を定義することができます。

repeat(<length-percentage>)

スナップ点を定義するための間隔を、コンテナーの関連する先頭の橋から定義します。正の長さのみが許可されます。パーセント値はコンテナーの幅を示します。

公式定義

初期値none
適用対象スクロールコンテナー
継承なし
パーセント値スクロールコンテナーのパディングボックスの同じ軸に対する相対値
計算値指定通り。ただし相対的な長さはは絶対的な長さに変換される
アニメーションの種類離散値

形式文法

Error: could not find syntax for this item

例

水平スクロールスナップ点の設定

HTML

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS

#container {
  width: 200px;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  font-size: 0;
}

#container > div {
  width: 200px;
  height: 200px;
  display: inline-block;
  line-height: 200px;
  text-align: center;
  font-size: 100px;
}

#container > div:nth-child(even) {
  background-color: #87ea87;
}

#container > div:nth-child(odd) {
  background-color: #87ccea;
}

結果

仕様書

どの標準にも含まれていません。

ブラウザーの互換性

BCD tables only load in the browser

関連情報