非推奨
この機能はウェブ標準から削除されました。まだ対応しているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。使用を避け、できれば既存のコードを更新してください。このページの下部にあるブラウザーの対応を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
CSS の scroll-snap-destination
プロパティは、スクロールコンテナーの視覚的なビューポート内の要素のスナップポイントが配置される X および Y 座標の位置を定義します。
/* <position> 値 */ scroll-snap-destination: 400px 600px; /* グローバル値 */ scroll-snap-destination: inherit; scroll-snap-destination: initial; scroll-snap-destination: unset;
初期値 | 0px 0px |
---|---|
適用対象 | スクロールコンテナー |
継承 | なし |
パーセンテージ | relative to same axis of the padding-box of the scroll container |
メディア | interactive |
計算値 | 指定通り。ただし相対的 length は絶対的 length に変換 |
アニメーションの種類 | a position |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
値
<position>
- スクロールコンテナーの視覚的なビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。
形式文法
<position>where
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where
<length-percentage> = <length> | <percentage>
例
HTML
<div id="container"> <div> <p>At coordinate (0, 0)</p> <div class="scrollContainer destination0"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>At coordinate (25, 0)</p> <div class="scrollContainer destination25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>At coordinate (50, 0)</p> <div class="scrollContainer destination50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div>
CSS
#container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20px; } .scrollContainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; scroll-snap-destination: 20px 0; font-size: 0; } .destination0 { scroll-snap-destination: 0 0; } .destination25 { scroll-snap-destination: 25px 0; } .destination50 { scroll-snap-destination: 50px 0; } .scrollContainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .scrollContainer > div:nth-child(even) { background-color: #87EA87; } .scrollContainer > div:nth-child(odd) { background-color: #87CCEA; }
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Scroll Snap Module Level 1 scroll-snap-destination の定義 |
勧告候補 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
基本対応 | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 39 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android
完全対応
46
| Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。