Scroll-snap-stop - Propriété CSS

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

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), ou muni d'un notepad. Cependant l'ergonomie n'est pas parfaite car il est difficile de faire défiler les blocs longs comme CSS Backgrounds and borders module.

Voyez également les propriétés suivantes :

Valeurs pour scroll-snap-stop.

• scroll-snap-stop: normal;

  Quand on fait défiler le conteneur, il se peut que certains points d'accrochage soient sautés.

• 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.

Accéder à la propriété scroll-snap-stop par programme.

Avec Javascript, modifier la valeur de scroll-snap-stop.

En Javascript, voici comment modifier la valeur de scroll-snap-stop. Deux exemples de syntaxes sont donnés : le premier avec une notation typique de CSS, en kebab-case, et la deuxième avec la notation de Javascript, en camel-case.

let el = document.getElementById('id'); el.style['scroll-snap-stop'] = 'always'; // ou let el = document.getElementById('id'); el.style.scrollSnapStop = 'always';

Avec Javascript, lire la valeur de scroll-snap-stop.

Lorsque la propriété a été affectée à l'élément lui-même via son attribut style, le code ci-dessous récupère sa valeur, mais pas si elle a été initialisée en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['scroll-snap-stop']; // ou let el = document.getElementById('id'); let value = el.style.scrollSnapStop;

Avec Javascript, lire la valeur calculée de scroll-snap-stop.

La valeur calculée est celle qui résulte de la valeur affectée à l'élément, et de la prise en compte éventuelle des valeurs héritées. A défaut ce sera la valeur initiale de la propriété : normal dans le cas de scroll-snap-stop.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('scroll-snap-stop');

Avec JQuery, modifier la valeur de scroll-snap-stop.

JQuery propose également des syntaxes pour manipuler la propriété scroll-snap-stop. Elles sont plus courtes que celles de Javascript.


$('#id').css('scroll-snap-stop', 'always');
// ou
$('#id').css('scrollSnapStop', 'always');


Avec JQuery, lire la valeur calculée de scroll-snap-stop.

let value = $('#id').css('scroll-snap-stop');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS. Ces codes concernent tous la manipulation des styles CSS avec Javascript ou JQuery.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété scroll-snap-stop et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de scroll-snap-stop il n'y aura pas de différence entre ces deux valeurs puisque la propriété n'accepte que des valeurs prédéfinies. Cependant si vous essayez d'affecter une valeur inexistante, la première valeur sera vide, tandis que la deuxième sera la valeur initiale.

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.

Compatibilité des navigateurs avec scroll-snap-stop.

Les compatibilité des navigateurs actuels avec scroll-snap-stop est correcte. Il subsiste quelques problèmes avec les navigateurs marginaux ou obsolètes.

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

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.

• Module CSS - Défilement avec accrochages - Niveau 1

  Ce module de spécification définit les fonctionnalités concernant les défilements avec positions d'accrochage. Autrement dit les défilements calés par le contenu, pour éviter par exemple qu'une image se retrouve coupée en haut ou en bas de son conteneur.

  Concernant scroll-snap-stop. Première présentation de la propriété scroll-snap-stop.
  

  26 Mars 2015

  Document de travail.

  

  20 Octobre 2016

  Candidat à la recommandation.

  

  

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

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

Propriétés :