Wie beeinflussen Bildlauffelder die Sticky-Positionierung in CSS?

Bildlaufboxen im CSS-Modul „Positioniertes Layout“ verstehen

Das CSS-Modul „Positioniertes Layout“ definiert Sticky-Positionierung als eine Methode, bei der der Versatz einer Box relativ zum nächsten Vorfahren berechnet wird mit einem „Bildlauffeld“ oder dem Ansichtsfenster. Allerdings hat die genaue Beschaffenheit von Bildlauffeldern zu einiger Verwirrung geführt.

Definition von Bildlauffeldern

Ein Bildlauffeld ist im Wesentlichen ein Feld, bei dem die Überlaufeigenschaft auf einen anderen Wert als „sichtbar“ gesetzt ist. Wenn Sie den Überlauf beispielsweise auf „Ausgeblendet“ setzen, wird eine Box mit scrollbarem Inhalt erstellt.

Auswirkungen auf die Sticky-Positionierung

Im Zusammenhang mit der Sticky-Positionierung spielt die Scrollbox, die einem Sticky-Element am nächsten liegt, eine entscheidende Rolle . Wenn der Überlauf eines Vorfahren des Sticky-Elements auf einen Scrolling-Wert eingestellt ist, wird der Offset des Sticky-Elements relativ zu diesem Scrolling-Feld berechnet.

Scrolling-Boxen ein- oder ausschalten

Um zu steuern, ob Um ein Feld zu einem Bildlauffeld zu machen, muss die Überlaufeigenschaft entsprechend festgelegt werden. Wenn Sie den Überlauf auf „sichtbar“ setzen, wird die Erstellung eines Bildlauffelds verhindert, während bei der Einstellung „Automatisch“, „Bildlauf“ oder „Ausgeblendet“ ein Bildlauffeld erstellt wird.

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>

Dieser Code erstellt einen hohen Container (Wrapper) und ein Sticky-Element (Div) darin. Der Wrapper ist overflow: versteckt, was ihn zu einem Bildlauffeld macht. Wenn der Benutzer durch die Seite scrollt, bleibt das Sticky-Element am oberen Rand des Ansichtsfensters hängen, bis es den oberen Rand des Wrappers erreicht. An diesem Punkt stoppt das Sticky-Element den Bildlauf, da es den oberen Rand seines nächstgelegenen Bildlauffelds, dem Wrapper, erreicht hat.

Das obige ist der detaillierte Inhalt vonWie beeinflussen Bildlauffelder die Sticky-Positionierung in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!