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;

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
Média	interactif
Valeur calculée	comme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animation	une position
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

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écification

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.

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Edge Mobile	Firefox pour Android	Opera pour Android	Safari pour iOS	Samsung Internet
Support simple ObsolèteNon-standard	Chrome Aucun support Non	Edge Aucun support Non	Firefox Support complet 39	IE Aucun support Non	Opera Aucun support Non	Safari Aucun support Non	WebView Android Aucun support Non	Chrome Android Aucun support Non	Edge Mobile Aucun support Non	Firefox Android Support complet 46 Support complet 46 Support complet 39 Désactivée Désactivée From version 39: this feature is behind the `layout.css.scroll-snap.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Aucun support Non	Safari iOS Aucun support Non	Samsung Internet Android Aucun support Non

Légende

Support complet: Support complet
Aucun support: Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.: Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.: Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.: Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.