scroll-initial-target
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die scroll-initial-target CSS Eigenschaft ermöglicht die Definition von Elementen, die potenzielle Snap-Ziele sind, wenn ihr Vorfahr scroll container erstmals gerendert wird.
Syntax
/* Keyword values */
scroll-initial-target: none;
scroll-initial-target: nearest;
/* Global values */
scroll-initial-target: inherit;
scroll-initial-target: initial;
scroll-initial-target: revert;
scroll-initial-target: revert-layer;
scroll-initial-target: unset;
Werte
Beschreibung
Die scroll-initial-target-Eigenschaft ermöglicht die Definition von Elementen, die beim ersten Rendern ihrer übergeordneten scroll snap Container eingerastet werden sollen. Wenn Sie den Wert auf nearest setzen, wird das Element als potenzielles Ziel festgelegt, das eingerastet werden soll, wenn der nächstgelegene Vorfahr scroll container erstmals auf der Seite erscheint.
Wenn mehrere Elemente oder Pseudo-Elemente im Scroll-Container auf nearest gesetzt sind, ist das erste Element in der Baumreihenfolge das anfängliche Scroll-Snap-Ziel.
Der anfängliche Wert ist none, was bedeutet, dass ein Scroll-Snapbares Element standardmäßig kein anfängliches Scroll-Ziel ist. Der Wert none kann auch auf ein Element gesetzt werden, um es explizit nicht zu einem anfänglichen Scroll-Ziel zu machen.
Wenn die anfängliche Scroll-Position eines Scroll-Containers sowohl durch die place-content Inhaltsverteilungseigenschaft als auch durch scroll-initial-target auf Nachkommen möglicherweise festgelegt wird, gewinnt der erste Nachkomme mit scroll-initial-target: nearest.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | the specified keyword |
| Animationstyp | Not animatable |
Formale Syntax
scroll-initial-target =
none |
nearest
Beispiele
Verwendung von scroll-initial-target
Das folgende Beispiel zeigt die beiden Werte von scroll-initial-target und wie das erste Element mit scroll-initial-target eingerastet wird.
HTML
Wir fügen 5 Container ein, die von einem Absatz, der den erwarteten Effekt erklärt, eingeleitet werden.
<p><code>none</code> on #4 only</p>
<div class="none">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="set">4</div>
<div>5</div>
</div>
<p><code>nearest</code> on #4 only</p>
<div class="nearest">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="set">4</div>
<div>5</div>
</div>
<p><code>nearest</code> on even elements</p>
<div class="nearest">
<div>1</div>
<div class="set">2</div>
<div>3</div>
<div class="set">4</div>
<div>5</div>
</div>
<p><code>nearest</code> on odd elements</p>
<div class="nearest">
<div class="set">1</div>
<div>2</div>
<div class="set">3</div>
<div>4</div>
<div class="set">5</div>
</div>
<p><code>nearest</code> on odd elements, with <code>none</code> on #1</p>
<div class="nearest">
<div class="set unset">1</div>
<div>2</div>
<div class="set">3</div>
<div>4</div>
<div class="set">5</div>
</div>
CSS
Wir richten die nächstgelegenen und keine Elemente als Scroll-Snap-Container ein und zentrieren die eingerasteten Elemente.
/* mandatory scroll-snap on parent */
div.nearest,
div.none {
scroll-snap-type: x mandatory;
}
/* scroll-snap alignment for children */
div > div {
scroll-snap-align: center;
scroll-initial-target: always;
}
Dann setzen wir scroll-initial-target entweder auf none oder nearest für alle Elemente mit der Klasse .set.
.none .set,
.nearest .set.unset {
scroll-initial-target: none;
}
.nearest .set {
scroll-initial-target: nearest;
}
Ergebnis
Die Wirkung der Eigenschaft wird gezeigt, wenn der Scroll-Snap-Container auf der Seite angezeigt wird.
Jede Reihe rastet auf das erste Element mit nearest in Baumreihenfolge ein, falls vorhanden. Im letzten Beispiel haben wir den Wert nearest mit none auf dem ersten Element überschrieben, sodass das erste Element mit nearest #3 ist.
Spezifikationen
| Specification |
|---|
| CSS Scroll Snap Module Level 2 # propdef-scroll-initial-target |