--- title: scroll-snap-destination slug: Web/CSS/scroll-snap-destination tags: - CSS - CSS スクロールスナップ - CSS プロパティ - Deprecated - Reference translation_of: Web/CSS/scroll-snap-destination --- <div>{{CSSRef}}{{deprecated_header}}</div> <p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-destination</code></strong> プロパティは、スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}内の要素のスナップポイントが配置される X および Y 座標の位置を定義します。</p> <pre class="brush:css no-line-numbers">/* <position> 値 */ scroll-snap-destination: 400px 600px; /* グローバル値 */ scroll-snap-destination: inherit; scroll-snap-destination: initial; scroll-snap-destination: unset; </pre> <p>{{cssinfo}}</p> <h2 id="Syntax" name="Syntax">構文</h2> <h3 id="Values" name="Values">値</h3> <dl> <dt><code><position></code></dt> <dd>スクロールコンテナーの視覚的なビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。</dd> </dl> <h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> <pre class="syntaxbox">{{csssyntax}}</pre> <h2 id="Example" name="Example">例</h2> <h3 id="HTML">HTML</h3> <pre class="brush: 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> </pre> <h3 id="CSS">CSS</h3> <pre class="brush: 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; }</pre> <div>{{EmbedLiveSample("Example", "100%", "170")}}</div> <h2 id="Specification" name="Specification">仕様書</h2> <table class="standard-table"> <thead> <tr> <th scope="col">仕様書</th> <th scope="col">状態</th> <th scope="col">備考</th> </tr> </thead> <tbody> <tr> <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}</td> <td>{{Spec2("CSS Scroll Snap Points")}}</td> <td>初回定義</td> </tr> </tbody> </table> <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> <div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> <div>{{Compat("css.properties.scroll-snap-destination")}}</div>