Overscroll-behavior - Propriété CSS
Cette page concerne aussi les propriété(s) physique(s) :
overscroll-behavior-xoverscroll-behavior-yEt les propriétés logiques :
overscroll-behavior-blockoverscroll-behavior-inlineRésumé des caractéristiques de la propriété overscroll-behavior
auto | none | containautooverscroll-behavior passe d'une valeur à l'autre sans transition.Per grammar : sérialisation dans l'ordre de la syntaxe.Schéma de la syntaxe de overscroll-behavior.
overscroll-behavior.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.
Description de la propriété overscroll-behavior.
overscroll-behavior définit ce qui doit se passer lorsqu'un container de défilement arrive en bout de course, à savoir est ce que le défilement doit
être transmis au parent.
Il s'agit d'une propriété résumée qui regroupe les valeurs pour :
overscroll-behavior-x: Définit si l'ordre de défilement est transmis au parent lorsque le conteneur a atteint sa limite dans la direction horizontale.overscroll-behavior-y: Définit si l'ordre de défilement est transmis au parent lorsque le conteneur a atteint sa limite dans la direction verticale..
Notez que ces propriétés existent également en étant que propriété logiques, sensibles au mode d'écriture (voir writing-mode).
overscroll-behavior-inline: Définit si l'ordre de défilement est transmis au parent lorsque le conteneur a atteint sa limite dans la direction des lignes.overscroll-behavior-block: Définit si l'ordre de défilement est transmis au parent lorsque le conteneur a atteint sa limite dans la direction des blocs.
Un petit exemple.
Sur un mobile, ou sur un ordinateur de bureau mais avec la molette de la souris, faite défiler chacun des cadres ci-dessous. Sur le premier, lorsque vous arrivez en bout de course, il ne se passe plus rien. Sur le deuxième cadre par contre, le défilement est transmis au premier parent défilant, à savoir la page elle-même.
none
auto
Les éléments non défilants doivent quand même accepter la propriété overscroll-behavior mais ne la traite pas.
Valeurs pour overscroll-behavior.
- overscroll-behavior: contain;
L'élément défilant, lorsqu'il arrive en bout de course, ne transmet pas le défilement au parent. Mais les effets visuels tels que le rebond, sont maintenus.
Deux valeurs peuvent être précisées, la première valeur s'applique à
overscroll-behavior-x, la deuxième àoverscroll-behavior-y. Si une seule valeur est indiquée, elle s'appliquer aux deux directions X et Y. - overscroll-behavior: none;
La valeur
nonea le même effet quecontainavec, en plus, la suppression des effets visuels. - overscroll-behavior: auto;
C'est le fonctionnement par défaut des navigateurs : le défilement est transmis au premier parent défilant, lorsqu'il arrive en bout de course.
- overscroll-behavior: initial; (
auto) overscroll-behavior: inherit; overscroll-behavior: revert; overscroll-behavior: revertLayer; overscroll-behavior: unset;Consultez les pages suivantes pour plus de détails :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de overscroll-behavior.
La propriété overscroll-behavior s'anime de façon discrete, c'est à dire qu'elle passe brutalement d'une valeur à une autre.
Néanmoins le résultat est peu spectaculaire et peut même être invisible à l'écran.
Exemple interactif avec la propriété overscroll-behavior.
Faite défiler le container ci-dessous, avec la molette de la souris sur un ordinateur de bureau, ou avec le doigt sur un portable, et observez le défilement.
Avec la valeur auto le défilement se transmet au premier parent défilant, puis à la page.
Compatibilité des navigateurs avec overscroll-behavior.
La propriété overscroll-behavior est bien reconnue par les navigateurs actuels.
scroll-behavior qui définit si l'ordre de défilement est transmis au parent lorsque le conteneur a atteint sa limite.Remarques :
(1) Supporte -ms-scroll-chaining qui fonctionne de la même façon.
overscroll-behaviorNavigateurs 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
Chrome
Safari
Firefox
Safari sur IOS
Edge
Androïd Brower
Firefox pour Androïd
Chrome pour Androïd
KaiOS Browser
Opéra mini
Histoire de la propriété overscroll-behavior.
-
Module CSS - Gestion des limtes du défilement - Niveau 1
Concernantoverscroll-behavior. Première introduction de la propriétéoverscroll-behavior.
06 Juin 2019Document de travail.
Voir aussi, concernant les défilements hors limite.
Cette propriété est la seule qui soit décrite dans ce module Module CSS - Gestion des limtes du défilement.