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.
Définition formelle
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 |
Syntaxe formelle
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
No specification found
No specification data found for css.properties.scroll-snap-destination
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Compatibilité des navigateurs
BCD tables only load in the browser