From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- files/fr/web/api/document/scroll_event/index.html | 148 ---------------------- files/fr/web/api/document/scroll_event/index.md | 148 ++++++++++++++++++++++ 2 files changed, 148 insertions(+), 148 deletions(-) delete mode 100644 files/fr/web/api/document/scroll_event/index.html create mode 100644 files/fr/web/api/document/scroll_event/index.md (limited to 'files/fr/web/api/document/scroll_event') diff --git a/files/fr/web/api/document/scroll_event/index.html b/files/fr/web/api/document/scroll_event/index.html deleted file mode 100644 index 21c5ba592e..0000000000 --- a/files/fr/web/api/document/scroll_event/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: scroll -slug: Web/API/Document/scroll_event -tags: - - API - - Event Handler - - Reference - - events - - requestAnimationFrame -translation_of: Web/API/Document/scroll_event ---- -
{{APIRef}}
- -

L’évènement scroll (défilement) est émis lorsque l’on fait défiler le document ou un élément.

- -

Informations générales

- - - - - - - - - - - - - - - - - - - - - - - - -
BouillonnePas sur les éléments, mais bouillonne vers la defaultView si émis sur le document
AnnulableNon
Interface{{domxref("UIEvent")}}
CibleDefaultView, {{domxref("Document")}}, {{domxref("Element")}}
Action par défautAucune
- -
-

Note : Sur iOS UIWebViews, les évènements scroll ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir Bootstrap issue #16202. Safari et WKWebViews ne sont pas affectés par ce bogue.

-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}La cible de l’évènement (la plus haute dans l’arbre DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Le type d’évènement.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Si l’évènement bouillonne ou non.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Si l’évènement est annulable ou non.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (objet window du document)
detail {{readonlyInline}}long (float)0.
- -

Exemple

- -

Temporisation des évènements scroll

- -

Comme les évènements scroll 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.

- -

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 scroll avec requestAnimationFrame.

- -
// 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;
-});
- -

Autres exemples

- -

Pour plus d’exemples similaires, voir l’évènement resize.

- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('CSSOM View', '#scrolling-events')}}{{Spec2('CSSOM View')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.scroll_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/scroll_event/index.md b/files/fr/web/api/document/scroll_event/index.md new file mode 100644 index 0000000000..21c5ba592e --- /dev/null +++ b/files/fr/web/api/document/scroll_event/index.md @@ -0,0 +1,148 @@ +--- +title: scroll +slug: Web/API/Document/scroll_event +tags: + - API + - Event Handler + - Reference + - events + - requestAnimationFrame +translation_of: Web/API/Document/scroll_event +--- +
{{APIRef}}
+ +

L’évènement scroll (défilement) est émis lorsque l’on fait défiler le document ou un élément.

+ +

Informations générales

+ + + + + + + + + + + + + + + + + + + + + + + + +
BouillonnePas sur les éléments, mais bouillonne vers la defaultView si émis sur le document
AnnulableNon
Interface{{domxref("UIEvent")}}
CibleDefaultView, {{domxref("Document")}}, {{domxref("Element")}}
Action par défautAucune
+ +
+

Note : Sur iOS UIWebViews, les évènements scroll ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir Bootstrap issue #16202. Safari et WKWebViews ne sont pas affectés par ce bogue.

+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}La cible de l’évènement (la plus haute dans l’arbre DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Le type d’évènement.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Si l’évènement bouillonne ou non.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Si l’évènement est annulable ou non.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (objet window du document)
detail {{readonlyInline}}long (float)0.
+ +

Exemple

+ +

Temporisation des évènements scroll

+ +

Comme les évènements scroll 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.

+ +

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 scroll avec requestAnimationFrame.

+ +
// 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;
+});
+ +

Autres exemples

+ +

Pour plus d’exemples similaires, voir l’évènement resize.

+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('CSSOM View', '#scrolling-events')}}{{Spec2('CSSOM View')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.scroll_event")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf