`scroll-initial-target` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die scroll-initial-target CSS-Eigenschaft ermöglicht die Definition von Elementen, die potenzielle Snap-Ziele sein können, wenn ihr vorfahrendes Scroll-Container erstmals gerendert wird.

Syntax

css

/* 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

Diese Eigenschaft wird als eines der folgenden Schlüsselwortwerte angegeben:

none: Das Element ist kein anfängliches Scroll-Ziel.
nearest: Das Element ist potenziell ein anfängliches Scroll-Ziel für seinen nächstgelegenen vorfahrenden Scroll-Container.

Die scroll-initial-target-Eigenschaft ermöglicht die Definition von Elementen, die gesnappt werden sollen, wenn ihre übergeordneten Scroll-Snap-Container zum ersten Mal gerendert werden. Wird der Wert auf nearest gesetzt, wird das Element als potenzielles Ziel definiert, zu dem gesnappt 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 Baumstruktur das anfängliche Scroll-Snap-Ziel.

Der anfängliche Wert ist none, was bedeutet, dass ein scroll-snap-fähiges Element standardmäßig kein anfängliches Scroll-Ziel ist. Der Wert none kann auch auf ein Element gesetzt werden, um ausdrücklich zu machen, dass es kein anfängliches Scroll-Ziel ist.

Wenn die anfängliche Scroll-Position eines Scroll-Containers potenziell sowohl durch die place-content Inhaltsverteilungseigenschaft als auch durch scroll-initial-target auf beliebigen Nachkommen 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 demonstriert die beiden Werte von scroll-initial-target und wie das erste Element mit scroll-initial-target gesnappt wird.

HTML

Wir fügen 5 Container hinzu, denen ein Absatz vorausgeht, der den erwarteten Effekt erklärt.

html

<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ächsten und None-Elemente als Scroll-Snap-Container ein und zentrieren die gesnappten Elemente.

css

/* 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.

css

.none .set,
.nearest .set.unset {
  scroll-initial-target: none;
}
.nearest .set {
  scroll-initial-target: nearest;
}

/* setup */
body {
  height: 100%;
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  font-family: sans-serif;
  text-align: center;
}

div.nearest,
div.none {
  display: flex;
  overflow: auto;
  font-size: 3rem;
}

div div {
  width: 90%;
  min-width: 15rem;
  flex: none;
  outline: 1px solid #333333;
}

/* coloration */
div > div:nth-child(even) {
  background-color: #87ea87;
}

div > div:nth-child(odd) {
  background-color: #87ccea;
}

p {
  margin: 1em 0 0;
}

@supports not (scroll-initial-target: nearest) {
  :root::before {
    content: "Your browser doesn't support the scroll-initial-target property.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Ergebnis

Der Effekt der Eigenschaft wird demonstriert, wenn der Scroll-Snap-Container auf der Seite angezeigt wird.

Jede Zeile snappt zum ersten Element mit dem Wert nearest, falls vorhanden, in Baumordnung. Im letzten Beispiel haben wir den Wert nearest mit none auf dem ersten Element überschrieben, sodass das erste Element mit nearest, das angewendet wird, Element #3 ist.

Spezifikationen

Spezifikation
CSS Scroll Snap Module Level 2 # propdef-scroll-initial-target

Browser-Kompatibilität

Siehe auch

CSS Scroll Snap

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

scroll-initial-target CSS property

HTML

CSS

Ergebnis

Help improve MDN

`scroll-initial-target` CSS property