CSS のスクロール ボックスは何によって決まるのでしょうか?

CSS でのスクロール ボックスの定義は何ですか?

CSS では、「スクロール ボックス」という用語は、スティッキー配置のコンテキストで重要な意味を持ちます。 Positioned Layout Module Level 3 ドラフトによると、スティッキー ボックスのオフセットは、スクロール ボックスを持つ最も近い祖先を基準にして計算されます。

スティッキーの配置を制御するには、スクロール ボックスを識別することが重要です。ドラフトに記載されているように、「フロー ルート」などの関連用語の現在の定義と使用法は完全に最適ではありません。

スクロール ボックスのステータスの決定

動作を理解するにはスクロール ボックスのオーバーフロー プロパティの役割を考えてみましょう。スクロール ボックスは通常、オーバーフローが非表示の値に設定されているボックスです。これは、ボックスの内容が境界を超えてスクロール可能になる可能性があることを意味します。

例として、次のコードを考えてみましょう。

.wrapper {
  height: 200vh;
  border: 2px solid;
}

.wrapper > div {
  position: sticky;
  top: 0;
  height: 20px;
  background: red;
}

<div class="wrapper">
  <div></div>
</div>

このシナリオでは、親の .wrapper がビューポートよりも高いため、垂直スクロールバーが表示されます。その結果、position: Sticky を持つ子 div は、スクロールすると .wrapper の表示可能領域内でスティッキーになります。これは、スティッキー配置に対するスクロール ボックスの効果を示しています。

要約すると、CSS のスクロール ボックスは、通常、スクロールを有効にする値に設定されたオーバーフローを持つボックスとして定義されます。この概念を理解することは、デザイン内のスティッキー要素の動作を操作および制御するために不可欠です。

以上がCSS のスクロール ボックスは何によって決まるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。