Was bestimmt ein Scrollfeld bei der CSS-Positionierung?

Bildlauffelder bei der CSS-Positionierung verstehen

Das Konzept der „Bildlauffelder“ entstand im CSS Positioned Layout Module Level 3 (Arbeitsentwurf) , insbesondere im Zusammenhang mit der klebrigen Positionierung. Die Definition besagt, dass der Versatz einer klebrig positionierten Box relativ zum nächstgelegenen Vorfahren mit einer Bildlaufbox oder dem Ansichtsfenster berechnet wird, wenn kein solcher Vorfahre vorhanden ist.

Bildlaufboxen definieren

Obwohl der Begriff im Entwurf verwendet wird, fehlt ihm an anderer Stelle im CSS eine genaue Definition. Basierend auf den verfügbaren Informationen wird unter einem Scrollfeld jedoch Folgendes verstanden:

• Ein Feld, bei dem ein Wert für die Eigenschaft „Überlauf“ auf einen anderen Wert als „sichtbar“ (Standardeinstellung) gesetzt ist.

Dieses Verständnis deckt sich mit Beispielen, bei denen Überlaufprobleme das Verhalten von Sticky-Elementen beeinflussen können.

Bildlauffelder identifizieren

In der Praxis Wechsel Ein- oder Ausschalten, ob es sich bei einem Feld um ein Bildlauffeld handelt, kann durch Ändern der Eigenschaft „overflow“ erreicht werden. Zum Beispiel:

• Wenn eine Box overflow:hidden als übergeordnetes Element hat, scrollen alle darin enthaltenen position:sticky-Elemente nicht, da ihr Versatz basierend auf der ausgeblendeten Box berechnet wird.
• Umgekehrt ermöglicht das Festlegen von overflow:scroll für ein Ancestor-Feld, dass dessen position:sticky-Nachkommen innerhalb dieses Felds scrollen können.

Beispiel

Betrachten Sie das folgende Beispiel :

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

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

In diesem Beispiel ist das .wrapper-Div aufgrund von overflow:scroll ein Bildlauffeld. Daher scrollt das Sticky-Div innerhalb des Wrappers.

Das obige ist der detaillierte Inhalt vonWas bestimmt ein Scrollfeld bei der CSS-Positionierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!