scroll-initial-target
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété CSS scroll-initial-target permet de définir des éléments qui sont des cibles potentielles de l'ancrage lorsque leur ancêtre du conteneur de défilement est rendu pour la première fois.
Syntaxe
/* Valeurs avec un mot-clé */
scroll-initial-target: none;
scroll-initial-target: nearest;
/* Valeurs globales */
scroll-initial-target: inherit;
scroll-initial-target: initial;
scroll-initial-target: revert;
scroll-initial-target: revert-layer;
scroll-initial-target: unset;
Valeurs
Description
La propriété scroll-initial-target permet de définir des éléments qui doivent être alignés lorsque leurs conteneurs d'ancrage de défilement parents sont rendus pour la première fois. La valeur nearest définit l'élément comme une cible potentielle qui doit être alignée lorsque l'ancêtre du conteneur de défilement le plus proche apparaît pour la première fois sur la page.
Si plusieurs éléments ou pseudo-éléments dans le conteneur de défilement sont définis sur nearest, le premier élément dans l'ordre de l'arbre est la cible initiale de l'ancrage de défilement.
La valeur initiale est none, ce qui signifie qu'un élément pouvant être aligné n'est pas par défaut une cible de défilement initiale. La valeur none peut également être définie sur un élément pour le rendre explicitement non cible de défilement initiale.
Si la position de défilement initiale d'un conteneur de défilement est potentiellement définie à la fois par la propriété de distribution de contenu place-content et par scroll-initial-target sur des descendants — le premier descendant avec scroll-initial-target: nearest l'emporte.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | le mot-clé défini |
| Type d'animation | Non animable |
Syntaxe formelle
scroll-initial-target =
none |
nearest
Exemples
Utiliser scroll-initial-target
L'exemple suivant démontre les deux valeurs de scroll-initial-target et comment le premier élément avec scroll-initial-target est aligné.
HTML
Nous incluons 5 conteneurs, précédés d'un paragraphe expliquant l'effet attendu.
<p><code>none</code> sur #4 uniquement</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> sur #4 uniquement</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> sur les éléments pairs</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> sur les éléments impairs</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> sur les éléments impairs, avec <code>none</code> sur #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
Nous configurons l'accrochage des éléments les plus proches et des éléments sans au défillement comme pour les conteneurs de défilement, en centrant les éléments accrochés.
/* scroll-snap est obligatoire (mandatory) sur le parent */
div.nearest,
div.none {
scroll-snap-type: x mandatory;
}
/* alignement scroll-snap pour les enfants */
div > div {
scroll-snap-align: center;
scroll-initial-target: always;
}
Nous définissons ensuite scroll-initial-target sur none ou nearest pour tous les éléments avec la classe .set.
.none .set,
.nearest .set.unset {
scroll-initial-target: none;
}
.nearest .set {
scroll-initial-target: nearest;
}
Résultat
L'effet de la propriété est démontré lorsque le conteneur de défilement avec accrochage est affiché sur la page.
Chaque ligne s'accroche au premier élément avec nearest défini, le cas échéant, dans l'ordre de l'arbre. Dans le dernier exemple, nous avons remplacé la valeur nearest par none sur le premier élément, donc le premier élément avec nearest appliqué est le #3.
Spécifications
| Spécification |
|---|
| CSS Scroll Snap Module Level 2 # propdef-scroll-initial-target |