jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Generateur CSS overscroll-behavior

Générez du CSS overscroll-behavior pour controler le pull-to-refresh et le chaînage du defilement.

Chargement de l'outil...

Qu'est-ce que Generateur CSS overscroll-behavior ?

overscroll-behavior controle ce qui se passe lorsqu'une zone défilable atteint sa limite. Sur les appareils mobiles, le dépassement de défilement peut déclencher le pull-to-refresh ou laisser le défilement se propager d'une modale vers la page derrière elle. Cette propriété vous permet de contenir ou d'empêcher les effets de dépassement de défilement sur le body, les modales, les barres latérales et les carrousels.

Réponse rapide

Contrôlez ce qui se passe lorsqu'un élément défilable atteint sa limite. Utilisez contain pour arrêter le chaînage de défilement tout en conservant l'effet de rebond, ou none pour supprimer tous les effets de dépassement y compris le pull-to-refresh.

Last updated: 2026-06-11

Limites

  • overscroll-behavior est principalement une préoccupation mobile. Les navigateurs de bureau appliquent peu ou pas d'effets de dépassement, donc la propriété a peu d'impact visible sur le bureau.
  • Tester overscroll-behavior sur le bureau nécessite une émulation d'appareil dans DevTools car le comportement de défilement de la souris diffère considérablement des gestes tactiles.
  • overscroll-behavior ne contrôle que le chaînage de défilement à la limite du document. Il n'empêche pas la propagation du défilement dans les conteneurs défilables imbriqués qui ne sont pas au bord de la zone d'affichage. Pour le confinement interne du défilement, utilisez également overscroll-behavior sur le conteneur interne.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Sélectionnez un scénario qui correspond à l'endroit où vous souhaitez contrôler le comportement de dépassement de défilement.
  2. Choisissez le comportement : contain pour arrêter le chaînage de défilement mais conserver l'effet de rebond, ou none pour empêcher tous les effets de dépassement.
  3. Sélectionnez l'axe si vous souhaitez contrôler séparément le défilement horizontal ou vertical.
  4. Copiez le CSS et testez sur un véritable appareil mobile pour confirmer le comportement attendu.

A quoi il sert

  • Empêcher le pull-to-refresh sur le body d'une page tout en conservant le défilement vertical fonctionnel.
  • Arrêter le défilement de la page d'arrière-plan lorsqu'une modale ou un tiroir est ouvert.
  • Contenir le défilement horizontal dans un carrousel afin qu'il ne déclenche pas la navigation arrière/avant.

Cas d'usage

Exemples concrets

Exemple

Empêcher le pull-to-refresh

Une page d'application web souhaite désactiver le pull-to-refresh tout en conservant le défilement normal. overscroll-behavior: contain sur le body arrête le geste de rafraîchissement sans bloquer le défilement.

Exemple

Modale avec verrouillage de défilement

Une boîte de dialogue modale a son propre contenu défilable. overscroll-behavior: contain sur l'overlay de la modale empêche le défilement de se propager vers la page derrière elle.

Erreurs frequentes

  • Appliquer overscroll-behavior: none à l'élément body, ce qui désactive complètement le pull-to-refresh et peut frustrer les utilisateurs mobiles.
  • Définir overflow: hidden sur le body pour le verrouillage de défilement de la modale au lieu d'utiliser overscroll-behavior.
  • Oublier de tester sur de véritables appareils mobiles où les effets de dépassement de défilement diffèrent de l'émulation de bureau.

Vérification

  1. Testez le comportement sur un véritable appareil mobile en défilant au-delà de la limite de l'élément cible et en confirmant le comportement attendu de pull-to-refresh ou de chaîne de défilement.
  2. Utilisez le mode appareil de Chrome DevTools avec l'émulation tactile activée pour approximer le comportement de dépassement de défilement mobile sur le bureau.

FAQ

Questions sur Generateur CSS overscroll-behavior

Quelle est la différence entre contain et none ?

contain arrête le chaînage de défilement vers le parent mais conserve l'effet de rebond ou de lueur visuel à la limite. none empêche à la fois le chaînage et l'effet visuel de dépassement.

Dois-je utiliser overscroll-behavior plutôt que overflow: hidden pour les modales ?

overscroll-behavior est meilleur pour empêcher la propagation du défilement tout en gardant la modale défilable. Utilisez-le avec une technique de position fixed, pas à la place.

Est-ce que overscroll-behavior affecte le pull-to-refresh ?

Oui. overscroll-behavior: contain sur l'élément body empêche le geste de pull-to-refresh du navigateur tout en permettant le défilement normal de la page. Ceci est utile pour les applications web qui gèrent elles-mêmes le rafraîchissement ou la navigation.

Puis-je appliquer différentes valeurs à x et y ?

Oui. Utilisez la syntaxe à deux valeurs overscroll-behavior: contain auto pour définir différents comportements pour chaque axe. La première valeur s'applique à l'axe x et la deuxième valeur s'applique à l'axe y.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi