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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: scroll
slug: Web/API/Document/scroll_event
tags:
- API
- Event Handler
- Reference
- events
- requestAnimationFrame
translation_of: Web/API/Document/scroll_event
---
<p>{{APIRef}}<br>
<span class="seoSummary">L’évènement <strong><code>scroll</code></strong> (défilement) est émis lorsque l’on fait défiler le document ou un élément.</span></p>
<h2 id="Informations_générales">Informations générales</h2>
<table class="properties">
<tbody>
<tr>
<th>Bouillonne</th>
<td>Pas sur les éléments, mais bouillonne vers la defaultView si émis sur le document</td>
</tr>
<tr>
<th>Annulable</th>
<td>Non</td>
</tr>
<tr>
<th>Interface</th>
<td>{{domxref("UIEvent")}}</td>
</tr>
<tr>
<th>Cible</th>
<td>DefaultView, {{domxref("Document")}}, {{domxref("Element")}}</td>
</tr>
<tr>
<th>Action par défaut</th>
<td>Aucune</td>
</tr>
</tbody>
</table>
<div class="blockIndicator note">
<p>Note : Sur iOS UIWebViews, les évènements <code>scroll</code> ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>. Safari et WKWebViews ne sont pas affectés par ce bogue.</p>
</div>
<h2 id="Propriétés">Propriétés</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Propriété</th>
<th scope="col">Type</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>target</code> {{readonlyInline}}</td>
<td>{{domxref("EventTarget")}}</td>
<td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td>
</tr>
<tr>
<td><code>type</code> {{readonlyInline}}</td>
<td>{{domxref("DOMString")}}</td>
<td>Le type d’évènement.</td>
</tr>
<tr>
<td><code>bubbles</code> {{readonlyInline}}</td>
<td>{{domxref("Boolean")}}</td>
<td>Si l’évènement bouillonne ou non.</td>
</tr>
<tr>
<td><code>cancelable</code> {{readonlyInline}}</td>
<td>{{domxref("Boolean")}}</td>
<td>Si l’évènement est annulable ou non.</td>
</tr>
<tr>
<td><code>view</code> {{readonlyInline}}</td>
<td>{{domxref("WindowProxy")}}</td>
<td>{{domxref("Document.defaultView")}} (objet <code>window</code> du document)</td>
</tr>
<tr>
<td><code>detail</code> {{readonlyInline}}</td>
<td><code>long</code> (<code>float</code>)</td>
<td>0.</td>
</tr>
</tbody>
</table>
<h2 id="Exemple">Exemple</h2>
<h3 id="Temporisation_des_évènements_scroll">Temporisation des évènements scroll</h3>
<p>Comme les évènements <code>scroll</code> peuvent être émis à une fréquence élevée, le gestionnaire d’évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l’évènement en utilisant {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("window.setTimeout()", "setTimeout()")}} ou un {{domxref("CustomEvent")}}, comme suit.</p>
<p>Notez, cependant, que les évènements d’interface utilisateur et les frames d’animation sont émises à peu près à la même fréquence, et ainsi l’optimisation qui suit est souvent superflue. Cet exemple optimise l’évènement <code>scroll</code> avec <code>requestAnimationFrame</code>.</p>
<pre class="brush: js notranslate">// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/
var derniere_position_de_scroll_connue = 0;
var ticking = false;
function faireQuelqueChose(position_scroll) {
// faire quelque chose avec la position du scroll
}
window.addEventListener('scroll', function(e) {
derniere_position_de_scroll_connue = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
faireQuelqueChose(derniere_position_de_scroll_connue);
ticking = false;
});
}
ticking = true;
});</pre>
<h3 id="Autres_exemples">Autres exemples</h3>
<p>Pour plus d’exemples similaires, voir l’évènement <a href="/en-US/docs/Web/Events/resize#Example">resize</a>.</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<td>Spécification</td>
<td>État</td>
</tr>
<tr>
<td>{{SpecName('CSSOM View', '#scrolling-events')}}</td>
<td>{{Spec2('CSSOM View')}}</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.Document.scroll_event")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{domxref("GlobalEventHandlers.onscroll")}}</li>
</ul>
|
