`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.

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 sind, wenn ihr Vorfahren-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

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

Die Eigenschaft scroll-initial-target ermöglicht die Definition von Elementen, die eingerastet werden sollen, wenn ihre übergeordneten Scroll-Snap Container erstmals gerendert werden. Wenn der Wert auf nearest gesetzt wird, wird das Element als potenzielles Ziel definiert, zu dem es eingerastet werden soll, wenn der nächstgelegene Vorfahren-Scroll-Container zum ersten Mal 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 ursprüngliche Scroll-Snap-Ziel.

Der initiale Wert ist none, was bedeutet, dass ein scroll-snappbares Element standardmäßig kein ursprüngliches Scroll-Ziel ist. Der Wert none kann auch auf ein Element gesetzt werden, um es ausdrücklich nicht als ursprüngliches Scroll-Ziel zu definieren.

Wenn die anfängliche Scroll-Position eines Scroll-Containers potenziell sowohl durch die place-content Inhaltsverteilungs-Eigenschaft als auch durch scroll-initial-target auf einem 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 untenstehende 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, denen ein Absatz vorausgeht, der die erwartete Wirkung erläutert.

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ächstgelegenen und keine Elemente als Scroll-Snap-Container ein, wobei wir die eingerasteten Elemente zentrieren.

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 auf 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

Die Wirkung der Eigenschaft wird demonstriert, wenn der Scroll-Snap-Container auf der Seite gezeichnet wird.

Jede Zeile rastet auf das erste Element mit nearest ein, sofern vorhanden, in Baumreihenfolge. Im letzten Beispiel haben wir den nearest Wert mit none auf dem ersten Element überschrieben, sodass das erste Element mit dem angewandten Wert nearest #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