Qu'est-ce qui détermine une boîte de défilement en CSS ?

Qu'est-ce qui définit les boîtes de défilement en CSS ?

En CSS, le terme « boîte de défilement » a une signification dans le contexte du positionnement collant. Selon le projet de niveau 3 du module de mise en page positionnée, le décalage d'une boîte collante est calculé par rapport à l'ancêtre le plus proche avec une boîte de défilement.

L'identification des boîtes de défilement peut être cruciale pour contrôler le positionnement collant. Comme indiqué dans le projet, les définitions actuelles et l'utilisation de termes associés tels que « racine de flux » ne sont pas entièrement optimales.

Détermination de l'état de la boîte de défilement

Pour comprendre le comportement des cases de défilement, considérons le rôle de la propriété overflow. Une zone de défilement est généralement une zone dans laquelle le débordement est défini sur une valeur non visible. Cela signifie que le contenu de la boîte peut potentiellement s'étendre au-delà de ses limites, la rendant défilante.

À titre d'exemple, considérons le code suivant :

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

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

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

Dans ce scénario , le .wrapper parent est plus grand que la fenêtre d'affichage, ce qui fait apparaître une barre de défilement verticale. En conséquence, le div enfant avec position: sticky deviendra collant dans la zone visible de .wrapper lors du défilement. Cela démontre l'effet des boîtes de défilement sur le positionnement collant.

Pour résumer, une boîte de défilement en CSS est généralement définie comme une boîte avec un débordement défini sur une valeur qui permet le défilement. Comprendre ce concept est essentiel pour manipuler et contrôler le comportement des éléments collants dans vos conceptions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!