scroll-snap-destination
Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
La propriété scroll-snap-destination
définit les coordonnées horizontale et verticale des points d'accroche dans le viewport du conteneur.
/* Valeur <position> */
scroll-snap-destination: 400px 600px;
/* Valeurs globales */
scroll-snap-destination: inherit;
scroll-snap-destination: initial;
scroll-snap-destination: unset;
Syntaxe
Valeurs
<position>
- Définit le décalage entre le bord du viewport du conteneur et le point d'accroche à utiliser lors du défilement. La première valeur indique la coordonnée horizontale et la seconde indique la coordonnée verticale.
Syntaxe formelle
<position>où
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
où
<length-percentage> = <length> | <percentage>
Exemples
HTML
<div id="container">
<div>
<p>Coordonnées (0, 0)</p>
<div class="scrollContainer destination0">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div>
<p>Coordonnées (25, 0)</p>
<div class="scrollContainer destination25">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div>
<p>Coordonnées (50, 0)</p>
<div class="scrollContainer destination50">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
CSS
#container {
display: flex;
}
#container > div:nth-child(-n+2) {
margin-right: 20px;
}
.scrollContainer {
width: 100px;
overflow: auto;
white-space: nowrap;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: mandatory;
scroll-snap-destination: 20px 0;
font-size: 0;
}
.destination0 {
scroll-snap-destination: 0 0;
}
.destination25 {
scroll-snap-destination: 25px 0;
}
.destination50 {
scroll-snap-destination: 50px 0;
}
.scrollContainer > div {
width: 100px;
height: 100px;
display: inline-block;
line-height: 100px;
text-align: center;
font-size: 50px;
}
.scrollContainer > div:nth-child(even) {
background-color: #87EA87;
}
.scrollContainer > div:nth-child(odd) {
background-color: #87CCEA;
}
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Scroll Snap Module Level 1 La définition de 'scroll-snap-destination' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Valeur initiale | 0px 0px |
---|---|
Applicabilité | conteneurs d'ascenseurs |
Héritée | non |
Pourcentages | relatif au même axe de la padding-box du conteneur d'ascenceur |
Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
Type d'animation | une position |
Compatibilité des navigateurs
BCD tables only load in the browser