Désactiver pull to refresh avec overscroll-behavior en CSS

Pour désactiver pull to refresh, définissez overscroll-behavior-y: contain sur l’élément de défilement de la page, généralement body ou html :

body {
  overscroll-behavior-y: contain;
}

C’est l’exemple d’une seule ligne de l’article de Chrome sur la propriété, qui indique qu’elle désactive pull-to-refresh tout en conservant l’effet de lueur de bord (Chrome for Developers, 2017). La propriété contrôle ce qui se passe quand le défilement atteint le bord d’un conteneur de défilement, et MDN cite la suppression du comportement de type « rafraîchir en tirant » du navigateur parmi ses usages (MDN, octobre 2026). La prise en charge n’est pas uniforme : MDN classe overscroll-behavior comme non Baseline, et le support de Safari est partiel, donc testez-la sur les téléphones que vous visez.

Ce que fait overscroll-behavior

overscroll-behavior décide si un défilement qui atteint une limite se poursuit dans le parent, et si le navigateur affiche ses propres effets de dépassement. Selon MDN, par défaut les navigateurs mobiles ont tendance à afficher un effet de rebond, voire un rechargement de page, quand on atteint le haut ou le bas d’une page ou d’une zone de défilement. La propriété a quatre mots-clés (définitions MDN) :

Le chaînage du défilement est le comportement par défaut du navigateur qui transmet un défilement au parent quand un enfant atteint sa limite : l’exemple de Chrome est un tiroir d’applications qui atteint le bas et fait défiler la page derrière lui. overscroll-behavior est un raccourci pour overscroll-behavior-x et overscroll-behavior-y, et deux mots-clés définissent x puis y, dans cet ordre.

contain ou none pour pull to refresh

Utilisez contain quand vous voulez arrêter le rechargement tout en gardant le retour visuel de la plateforme, et none quand vous voulez aussi supprimer l’effet. L’article de Chrome décrit contain comme empêchant le chaînage du défilement tout en laissant apparaître les effets locaux comme la lueur de dépassement d’Android, et none comme la même chose avec les effets retirés. Pour pull to refresh sur la page elle-même :

/* bloquer pull to refresh, garder la lueur */
body { overscroll-behavior-y: contain; }

/* supprimer aussi la lueur et l'effet élastique */
body { overscroll-behavior-y: none; }

L’article de Chrome note aussi que sur html, contain empêche la navigation par dépassement, et qu’un none horizontal devait bloquer la navigation par glissement gauche et droit, ce que Chrome n’avait pas encore implémenté au moment de l’article, en 2017. Vérifiez le comportement actuel avant de vous y fier pour les gestes de glissement.

Désactiver pull to refresh supprime un geste qui sert à recharger. Si la page affiche des données en direct, proposez aux utilisateurs un bouton d’actualisation ou votre propre geste de rafraîchissement, puisque celui du navigateur disparaîtra.

Body ou conteneur de défilement

Placez la propriété sur l’élément qui défile, car elle ne s’applique qu’aux conteneurs de défilement. Pour la page, c’est l’élément qui définit la fenêtre, html ou body. Pour un panneau interne, un tiroir ou une liste de discussion, définissez-la sur ce panneau :

.chat-list {
  height: 12em;
  overflow: auto;
  overscroll-behavior: contain;
}

Cela empêche la page derrière le panneau de défiler quand l’utilisateur atteint la fin de la liste ; l’exemple de MDN utilise le même motif pour les boîtes de dialogue. Deux précisions tirées de MDN :

• Un conteneur de défilement sans débordement défilable, comme un élément avec overflow: hidden, est toujours à sa limite de défilement ; une valeur overscroll-behavior différente de la valeur par défaut bloque donc le chaînage vers les ancêtres. MDN indique que cela peut empêcher le défilement de l’arrière-plan pendant qu’une boîte de dialogue ou une superposition est ouverte.
• Un <iframe> n’est pas un conteneur de défilement, donc la propriété n’a aucun effet sur l’élément iframe lui-même. Pour contrôler le chaînage depuis l’intérieur d’une iframe, définissez-la à la fois sur html et body du document de l’iframe.

Prise en charge par les navigateurs en 2026

Les mots-clés auto, contain et none sont pris en charge depuis Chrome 63, Firefox 59 et Safari 16 (Safari iOS 16), selon MDN browser-compat-data 8.1.7 (octobre 2026). La prise en charge de Safari est marquée partielle : la propriété n’a pas d’effet sur les conteneurs de défilement sans débordement défilable, et Samsung Internet porte la même mention partielle. Le mot-clé chain est plus récent : BCD le liste à partir de Chrome 150 et Firefox 157, et pas dans Safari. BCD a aussi une entrée distincte au niveau supérieur pour la propriété, qui commence à Chrome 144 et Firefox 150. Web-features 3.44.0 ne classe donc pas overscroll-behavior comme Baseline, et MDN dit qu’elle n’est « pas Baseline » parce qu’elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Ce que cela signifie pour pull to refresh : la forme longue overscroll-behavior-y avec contain ou none est celle qu’utilise l’article de Chrome, et Safari 16 a ajouté la propriété (WebKit, septembre 2022). Les notes de version de WebKit et MDN ne disent pas si Safari sur iPhone bloque le geste de rechargement de la page ; vérifiez-le donc sur un iPhone.

Comment la tester sur téléphone

Testez pull to refresh sur un appareil réel ou un émulateur, car c’est un geste tactile.

1. Chargez la page sur un téléphone, faites défiler jusqu’en haut, puis tirez vers le bas. Sans le CSS, le navigateur peut recharger ou rebondir. Avec overscroll-behavior-y: contain sur body, rien ne doit se recharger.
2. Faites défiler un panneau imbriqué jusqu’à sa fin et continuez de tirer. La page derrière doit rester immobile si le panneau a contain.
3. Répétez dans chaque navigateur que vous prenez en charge. Chrome sur Android, Safari sur iPhone et Samsung Internet ont chacun leurs remarques ci-dessus.
4. Répétez dans une application web installée, si vous en publiez une ; voir ce qu’est une application web progressive pour savoir comment l’installation diffère selon les plateformes.

Pour Android depuis un ordinateur, voir tester un site web sur Android depuis un ordinateur. Pour iOS sans téléphone, voir tester sur un iPhone sans iPhone, et pour le reste d’une session de test mobile, la liste de contrôle des tests de site mobile.

Mobile View Extension recharge l’onglet avec le user agent, la taille d’écran et le ratio de pixels d’un téléphone : il montre donc votre mise en page et la page servie, mais il fonctionne à la souris. Il n’envoie aucun événement tactile, donc vous ne pouvez pas tirer la page pour la recharger dedans, et il utilise le moteur de Chrome sur ordinateur, donc le comportement de Safari n’y est pas reproduit. Servez-vous-en pour vérifier la mise en page d’un bouton d’actualisation personnalisé, et d’un appareil ou d’un simulateur pour le geste.

Questions fréquentes

Comment désactiver pull to refresh en CSS ?

Définissez overscroll-behavior-y: contain sur body ou html. L’article de Chrome en fait une ligne unique qui désactive pull-to-refresh tout en gardant la lueur de dépassement ; utilisez none pour supprimer aussi la lueur.

Quelle différence entre overscroll-behavior contain et none ?

contain empêche le chaînage du défilement et peut encore afficher un effet de rebond, alors que none empêche le chaînage et le rebond (MDN). Pour pull to refresh sur la page, les deux arrêtent le rechargement dans Chrome selon son article.

overscroll-behavior fonctionne-t-il dans Safari ?

Safari 16 et plus prennent en charge la propriété, avec une implémentation partielle : elle n’a aucun effet sur les conteneurs de défilement sans débordement défilable (MDN browser-compat-data 8.1.7). Testez sur un iPhone pour voir ce qui arrive au geste de niveau page.

Qu’est-ce que le chaînage du défilement ?

Le chaînage du défilement consiste, pour le navigateur, à transmettre un défilement au conteneur parent une fois qu’un enfant atteint sa limite ; par exemple, la fin d’une boîte de dialogue fait défiler la page qui se trouve derrière. overscroll-behavior: contain l’empêche.