scroll-snap-type
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2022.
La propriété CSS scroll-snap-type est définie sur un conteneur de défilement, l'optant pour l'accrochage au défilement en définissant la direction et la rigueur de l'application des points d'accroche dans le port d'accrochage.
Exemple interactif
scroll-snap-type: none;
scroll-snap-type: x mandatory;
scroll-snap-type: x proximity;
<section class="default-example" id="default-example">
<div id="example-element">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="info">Défiler »</div>
</section>
.default-example {
flex-wrap: wrap;
}
.default-example .info {
width: 100%;
padding: 0.5em 0;
font-size: 90%;
}
#example-element {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
}
#example-element > div {
flex: 0 0 250px;
width: 250px;
background-color: rebeccapurple;
color: white;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
#example-element > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
Si le contenu dans le port de défilement change — par exemple, si du contenu est ajouté, déplacé, supprimé ou redimensionné — le conteneur de défilement se repositionnera sur le contenu précédemment accroché si ce contenu est toujours présent.
Si la valeur d'une propriété liée à l'accrochage au défilement, telle que scroll-snap-type ou scroll-margin, est modifiée, le conteneur de défilement se repositionnera en fonction de la valeur actuelle de scroll-snap-type.
La spécification de toute animation ou physique précise utilisée pour appliquer ces points d'accroche n'est pas couverte par cette propriété, mais laissée à la discrétion de l'agent utilisateur.
Syntaxe
/* Aucun accrochage */
scroll-snap-type: none;
/* Valeur avec un mot-clé */
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;
/* Valeurs optionnelles pour la rigueur de l'accrochage */
/* mandatory | proximity */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;
/* Valeurs globales */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: revert;
scroll-snap-type: revert-layer;
scroll-snap-type: unset;
Valeurs
none-
Lorsque la zone d'affichage visuelle de ce conteneur de défilement est défilée, elle doit ignorer les points d'accrochage.
x-
Le conteneur de défilement s'accroche aux positions d'accrochage uniquement sur son axe horizontal.
y-
Le conteneur de défilement s'accroche aux positions d'accrochage uniquement sur son axe vertical.
block-
Le conteneur de défilement s'accroche aux positions d'accrochage uniquement sur son axe de bloc.
inline-
Le conteneur de défilement s'accroche aux positions d'accrochage uniquement sur son axe en ligne.
both-
Le conteneur de défilement s'accroche aux positions d'accrochage sur ses deux axes indépendamment (il peut s'accrocher à des éléments différents selon chaque axe).
mandatory-
La zone d'affichage visuelle de ce conteneur de défilement doit s'accrocher à une position d'accrochage si elle n'est pas actuellement défilée.
proximity-
La zone d'affichage visuelle de ce conteneur de défilement peut s'accrocher à une position d'accrochage si elle n'est pas actuellement défilée. L'agent utilisateur décide s'il s'accroche en fonction des paramètres de défilement. Il s'agit de la rigueur d'accrochage par défaut si un axe d'accrochage est défini.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
scroll-snap-type =
none |
[ x | y | block | inline | both ] [ mandatory | proximity ]?
Exemples
Accrochage sur différents axes
HTML
<main>
<section class="x mandatory-scroll-snapping" dir="ltr">
<div>X Mand. LTR</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<section class="x proximity-scroll-snapping" dir="ltr">
<div>X Prox. LTR</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<section class="y mandatory-scroll-snapping" dir="ltr">
<div>Y Mand. LTR</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<section class="y proximity-scroll-snapping" dir="ltr">
<div>Y Prox. LTR</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<section class="x mandatory-scroll-snapping" dir="rtl">
<div>X Mand. RTL</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<section class="x proximity-scroll-snapping" dir="rtl">
<div>X Prox. RTL</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<section class="y mandatory-scroll-snapping" dir="rtl">
<div>Y Mand. RTL</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<section class="y proximity-scroll-snapping" dir="rtl">
<div>Y Prox. RTL</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
</main>
CSS
/* scroll-snap */
.x.mandatory-scroll-snapping {
scroll-snap-type: x mandatory;
}
.x.proximity-scroll-snapping {
scroll-snap-type: x proximity;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y mandatory;
}
.y.proximity-scroll-snapping {
scroll-snap-type: y proximity;
}
div {
text-align: center;
scroll-snap-align: center;
flex: none;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-snap-type |
Compatibilité des navigateurs
Voir aussi
- Autres propriétés de la zone de défilement :
scroll-margin,scroll-padding - Propriétés des enfants de défilement :
scroll-snap-align,scroll-margin,scroll-snap-stop - Concepts de base de l'accrochage au défilement CSS
- Utilisation des évènements d'accrochage au défilement
- Le module d'accrochage au défilement CSS
- Contrôler précisément le défilement avec l'accrochage CSS (angl.) sur web.dev (2018)