CSS の配置におけるスクロール ボックスは何によって決まりますか?

CSS 配置におけるスクロール ボックスについて

「スクロール ボックス」の概念は、CSS Positioned Layout Module Level 3 (作業草案) で登場しました。 、特にスティッキー配置のコンテキストで。この定義では、固定的に配置されたボックスのオフセットは、スクロール ボックスまたはビューポート (そのような祖先が存在しない場合) を使用して最も近い祖先を基準にして計算されると述べています。

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

ドラフトではこの用語が使用されていますが、CSS の他の部分では正確な定義がありません。ただし、入手可能な情報に基づいて、スクロール ボックスは次のように理解されます。

• 「overflow」プロパティの値が「visible」(デフォルト) 以外の値に設定されたボックス。

この理解は、オーバーフローの問題が Sticky の動作に影響を与える可能性がある例と一致します。 elements.

スクロール ボックスの識別

実際には、ボックスがスクロール ボックスであるかどうかのオンとオフを切り替えるには、「overflow」プロパティを変更します。例:

• ボックスの親として overflow:hidden がある場合、そのオフセットは非表示のボックスに基づいて計算されるため、その中のposition:sticky要素はスクロールしません。
• 逆に、祖先ボックスに overflow:scroll を設定すると、position:sticky の子孫がそのボックス内でスクロールできるようになります。 box.

例

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

この例では、.wrapper div は次のとおりです。 overflow:scroll によるスクロール ボックス。したがって、スティッキー div はラッパー内でスクロールします。

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