Overscroll-behavior - Propriété CSS
Résumé des caractéristiques de la propriété overscroll-behavior
auto | none | containautooverscroll-behavior passe d'une valeur à l'autre sans transition.Schéma syntaxique de overscroll-behavior.
overscroll-behaviorLes liens du schéma donnent accès à plus de détails
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 :
scroll-behavior-x: propagation du défilement lors d'un défilement dans le sens horizontal.scroll-behavior-y: propagation du défilement lors d'un défilement dans le sens vertical.
Notez que ces propriétés existent également en étant que propriété logiques, sensibles au mode d'écriture (voir writing-mode).
scroll-behavior-inline: propagation du défilement lors d'un défilement dans le sens des lignes.scroll-behavior-block: propagation du défilement lors d'un défilement dans le sens 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 à
scroll-behavior-x, la deuxième àscroll-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.
Valeurs globales
(communes à toutes les propriétés)
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.
Animation de la propriété 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.
Prise en charge par les navigateurs (compatibilité).
La propriété overscroll-behavior est bien reconnue par les navigateurs actuels.
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
Évolution de la propriété overscroll-behavior.
-
Module CSS - Gestion des limtes du défilement - Niveau 1
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 CSS Overscroll Behavior Module.