1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
---
title: overscroll-behavior
slug: Web/CSS/overscroll-behavior
tags:
- CSS
- Propriété
- Propriété raccourcie
- Reference
translation_of: Web/CSS/overscroll-behavior
---
<div>{{CSSRef}}</div>
<p>La propriété CSS <strong><code>overscroll-behavior</code></strong> est une propriété raccourcie permettant de définir les propriétés {{cssxref("overscroll-behavior-x")}} et {{cssxref("overscroll-behavior-y")}}. Ces propriétés contrôlent le comportement du navigateur lorsqu'on dépasse la limite d'une zone de défilement (<em>scrolling</em>).</p>
<p>Par défaut, les navigateurs mobiles fournissent un effet de rebondissement voire déclenchent un rafraîchissement de la page lorsqu'on défile jusqu'en haut ou jusqu'en bas de la page. Vous avez pu remarquer que, lorsqu'une boîte de dialogue possède du contenu qu'on peut faire défiler, si on atteint la limite de défilement pour ce contenu, c'est la page sous-jacente qui défilera sous la boîte de dialogue : c'est ce qu'on appelle <strong>le chaînage du défilement</strong> (<em>scroll chaining</em>).</p>
<p>Dans certains cas, ces effets ne sont pas souhaitables. On peut alors utiliser <code>overscroll-behavior</code> pour éviter les chaînages intempestifs et les comportements du type "défiler pour rafraîchir".</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clés */
overscroll-behavior: auto;
overscroll-behavior: contain;
overscroll-behavior: none;
/* Valeurs avec deux mots-clés */
overscroll-behavior: auto contain;
/* Valeurs globales */
overflow: inherit;
overflow: initial;
overflow: unset;
</pre>
<p>La propriété <code>overscroll-behavior</code> est définie avec un ou deux mots-clés parmi ceux de la liste ci-après.</p>
<p>Lorsqu'on utilise cette propriété raccourcie avec deux valeurs, la première est utilisée pour <code>overscroll-behavior-x</code> et la seconde pour <code>overscroll-behavior-y</code>. Si une seule valeur est fournie, c'est cette même valeur qui est utilisée pour les deux propriétés.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>auto</code></dt>
<dd>Le dépassement de la zone de défilement se déroule normalement.</dd>
<dt><code>contain</code></dt>
<dd>Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.</dd>
<dt><code>none</code></dt>
<dd>Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<p>Dans notre exemple sur <code><a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior</a></code> (cf. <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">le code source</a> associé), on affiche une page entière de contacts et une boîte de dialogue avec une fenêtre de discussion. </p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p>
<p>Ces deux zones possèdent du contenu qui entraîne leur défilement. Normalement, si on défile la fenêtre de discussion jusqu'à une limite de défilement, ce serait au tour de la liste de contacts de défiler en dessous. Cependant, cet effet n'est pas souhaitable ici. On utilise donc <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> fonctionnerait également) sur la fenêtre de discussion :</p>
<pre class="brush: css">.messages {
height: 220px;
overflow: auto;
overscroll-behavior-y: contain;
} </pre>
<p>On souhaite également se débarasser des effets de bord lorsqu'on défile jusqu'en haut ou jusqu'en bas de la liste des contacts (Chrome pour Android rafraichit la page lorsqu'on défile après la limite haute par exemple). Pour cela, on utilise <code>overscroll-behavior: none</code> sur l'élément {{htmlelement("body")}} :</p>
<pre class="brush: css">body {
margin: 0;
overscroll-behavior: none;
}</pre>
<h2 id="Spécifications">Spécifications</h2>
<p>Jusqu'à ce que le CSSWG publie son propre brouillon, la spécification est consutable sur <a href="https://wicg.github.io/overscroll-behavior/">le dépôt GitHub du WICG</a>.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}</td>
<td>{{Spec2('CSS Overscroll Behavior')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
<p>{{Compat("css.properties.overscroll-behavior")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)</a></li>
<li>{{cssxref("-ms-scroll-chaining")}}</li>
</ul>
|
