スクロールボックスはCSSの固定位置にどのような影響を与えますか?

CSS 配置レイアウト モジュールのスクロール ボックスについて

CSS 配置レイアウト モジュールは、ボックスのオフセットが最も近い祖先を基準にして計算される方法としてスティッキー配置を定義します。 「スクロール ボックス」またはビューポートを使用します。ただし、スクロール ボックスの正確な性質により、混乱が生じています。

スクロール ボックスの定義

スクロール ボックスは、基本的に、オーバーフロー プロパティが表示以外の値に設定されているボックスです。たとえば、オーバーフローを非表示に設定すると、スクロール可能なコンテンツを含むボックスが作成されます。

スティッキー配置への影響

スティッキー配置のコンテキストでは、スティッキー要素に最も近いスクロール ボックスが重要な役割を果たします。 。スティッキー要素の祖先のオーバーフローがスクロール値に設定されている場合、スティッキー要素のオフセットはそのスクロール ボックスを基準にして計算されます。

スクロール ボックスのオンとオフを切り替える

ボックスがスクロール ボックスになる場合は、それに応じてオーバーフロー プロパティを設定する必要があります。オーバーフローを表示に設定すると、スクロール ボックスは作成されなくなりますが、自動、スクロール、または非表示に設定すると、スクロール ボックスが作成されます。

例

次の例を考えてみましょう:

.wrapper {
  height: 200vh;
  border: 2px solid;
}
.wrapper > div {
  position: sticky;
  top: 0;
  height: 20px;
  background: red;
}

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

このコードは、トールコンテナー (ラッパー) とその中にスティッキー要素 (div) を作成します。ラッパーには overflow: hidden があり、スクロール ボックスになります。ユーザーがページをスクロールすると、スティッキー要素はラッパーの上部に到達するまでビューポートの上部に貼り付きます。この時点で、スティッキー要素は、最も近いスクロール ボックスであるラッパーの上部に到達したため、スクロールを停止します。

以上がスクロールボックスはCSSの固定位置にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。