Scroll-snap-stop - Propriété CSS

scroll-snap-stop

Résumé des caractéristiques de la propriété scroll-snap-stop

Description rapide
Permet de forcer l'arrêt d'un défilement sur certains éléments.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
normal | always
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété scroll-snap-stop passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Défilement avec accrochages
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de scroll-snap-stop.

scroll-snap-stop - Syntax DiagramSyntax diagram of the scroll-snap-stop CSS property. See stylescss.free.fr for details. normal normal always alwaysscroll-snap-stop:;scroll-snap-stop:;
Schéma syntaxique de la propriété scroll-snap-stop.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété scroll-snap-stop.

La propriété scroll-snap-stop dans le contexte d'un conteneur défilant avec accrochages (Scroll Snap). Elle permet de forcer l'arrêt du défilement sur des éléments particuliers. C'est surtout utile sur les écrans tactiles : l'utilisateur fait souvent défiler le contenu plus qu'il ne voulait, et risque de manquer certains éléments importants, ce qui l'obligera à revenir en arrière.

scroll-snap-stop doit être appliquée sur les éléments du contenu défilant sur lesquels on souhaite forcer l'arrêt.

L'exemple ci-dessous est une liste partielle des propriétés CSS, classées par modules. La propriété scroll-snap-stop permet d'arrêter le défilement sur chacun des titres de module. L'effet ne sera réellement visible que sur un terminal avec écran tactile (défilement par glissé du doigt). Cependant l'ergonomie n'est pas parfaite car il est difficile de faire défiler les blocs longs comme CSS Backgrounds and borders module.

Compositions et mélanges

isolation
mix-blend-mode

Module CSS - Fragmentation

break-after
break-before
break-inside
orphans
widows

Module CSS - Couleurs

opacity

Module CSS - Ajustement des couleurs

color-scheme
forced-color-adjust
print-color-adjust

Module CSS - Confinement

container
container-name
container-type
content-visibility

Module CSS - Annotations Ruby

ruby-merge
ruby-overhang
ruby-position

Module CSS - Défilement avec accrochages

scroll-padding
scroll-snap-align
scroll-snap-stop
scroll-snap-type

Valeurs pour scroll-snap-stop.

  • scroll-snap-stop: normal;

    Aucun arrêt de défilement n'est mis en place.

  • scroll-snap-stop: always;

    Les éléments ciblés par la propriété scroll-snap-stop avec la valeur always bloqueront le défilement.

  • scroll-snap-stop: initial; (normal) scroll-snap-stop: inherit; scroll-snap-stop: revert; scroll-snap-stop: revertLayer; scroll-snap-stop: unset;

    Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de scroll-snap-stop.

La propriété scroll-snap-stop peut être animée. Mais son effet n'étant visible que lors d'un défilement du contenu, le rendu visuel de l'animation ext inexistant.

Exemple interactif avec la propriété scroll-snap-stop.

Rappelons que l'effet de la propriété scroll-snap-stop est difficilement perceptible, voire invisible, lorsque le défilement est réalisé avec une souris. Utilisez un terminal avec un écran tactile permettant de faire défiler le contenu avec le doigt.

scroll-snap-stop :

Compositions et mélanges

isolation
mix-blend-mode

Module CSS - Fragmentation

break-after
break-before
break-inside
orphans
widows

Module CSS - Couleurs

opacity

Module CSS - Ajustement des couleurs

color-scheme
forced-color-adjust
print-color-adjust

Module CSS - Confinement

container
container-name
container-type
content-visibility

Module CSS - Annotations Ruby

ruby-merge
ruby-overhang
ruby-position

Module CSS - Défilement avec accrochages

scroll-padding
scroll-snap-align
scroll-snap-stop
scroll-snap-type

Compatibilité des navigateurs avec scroll-snap-stop.

Colonne 1
Prise en charge du défilement par accrochages (lors de la manipulation des barres de défilement, le contenu s'arrête à des endroits pertinents).
Colonne 2
Support de la propriété scroll-snap-stop pour définir quels sont les éléments importants sur lesquels le défilement doit s'arrêter.

Remarques :

(1) Support partiel du défilement avec accrochage.

1
Défilements
avec accrochages
2
Propriété
scroll-snap-stop
Estimation de la prise en charge globale.
96%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Histoire de la propriété scroll-snap-stop.

Voir aussi, à propos des défilements avec accrochages.

Les défilements avec accrochage sont décrits dans le module CSS Scroll Snap Module. La propriété scroll-snap-stop et toutes celles qui se rapporte au sujet sont également présentes dans ce module :

Propriétés :

scroll-margin
Définit les marges de défilement dans le contexte d'un défilement avec accrochages (Scroll Snap).
scroll-padding
Définit les marges intérieures de la fenêtre de défilement.
scroll-snap-align
Définit l'alignement des éléments servant d'accrochage par rapport à la fenêtre d'affichage (scroll Snap).
scroll-snap-type
Définit les principales caractéristiques d'un défilement avec accrochages (Scroll Snap).