You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
How do we find the width and height of the browser window? How do we get the full width and height of the document, including the scrolled out part? How do we scroll the page using JavaScript?
3
+
Comment trouver la largeur et la hauteur de la fenêtre du navigateur ? Comment obtenir la largeur et la hauteur complètes du document, y compris la partie déroulante ? Comment faire défiler la page en utilisant JavaScript?
4
4
5
-
For most such requests, we can use the root document element`document.documentElement`, that corresponds to the `<html>` tag. But there are additional methods and peculiarities important enough to consider.
5
+
Pour la plupart de ces requêtes, nous pouvons utiliser l'élément de document racine`document.documentElement`, qui correspond à la balise `<html>`. Mais il existe des méthodes et des particularités supplémentaires suffisamment importantes pour être prises en compte.
6
6
7
-
## Width/height of the window
7
+
## Largeur/hauteur de la fenêtre
8
8
9
-
To get window width and height we can use `clientWidth/clientHeight`of`document.documentElement`:
9
+
Pour obtenir la largeur et la hauteur de la fenêtre, nous pouvons utiliser `clientWidth/clientHeight`de`document.documentElement`:
10
10
11
11
12
12
13
13
```online
14
-
For instance, this button shows the height of your window:
14
+
Par exemple, ce bouton affiche la hauteur de votre fenêtre :
Browsers also support properties `window.innerWidth/innerHeight`. They look like what we want. So why not to use them instead?
19
+
````warn header="Pas`window.innerWidth/Height`"
20
+
Les navigateurs prennent également en charge les propriétés `window.innerWidth/innerHeight`. Ils ressemblent à ce que nous voulons. Alors pourquoi ne pas les utiliser à la place ?
21
21
22
-
If there exists a scrollbar, and it occupies some space, `clientWidth/clientHeight`provide the width/height without it (subtract it). In other words, they return width/height of the visible part of the document, available for the content.
22
+
S'il existe une barre de défilement et qu'elle occupe de l'espace, `clientWidth/clientHeight`fournit la largeur/hauteur sans elle (cela la soustrait). En d'autres termes, elles renvoient la largeur/hauteur de la partie visible du document, disponible pour le contenu.
23
23
24
-
...And `window.innerWidth/innerHeight`include the scrollbar.
24
+
… Et `window.innerWidth/innerHeight`inclut la barre de défilement.
25
25
26
-
If there's a scrollbar, and it occupies some space, then these two lines show different values:
26
+
S'il y a une barre de défilement et qu'elle occupe de l'espace, ces deux lignes affichent des valeurs différentes :
27
27
```js run
28
-
alert( window.innerWidth ); //full window width
29
-
alert( document.documentElement.clientWidth ); //window width minus the scrollbar
28
+
alert( window.innerWidth ); //pleine largeur de fenêtre
29
+
alert( document.documentElement.clientWidth ); //largeur de la fenêtre moins la barre de défilement
30
30
```
31
31
32
-
In most cases we need the *available* window width: to draw or position something. That is: inside scrollbars if there are any. So we should use`documentElement.clientHeight/Width`.
32
+
Dans la plupart des cas, nous avons besoin de la largeur de fenêtre *disponible* : pour dessiner ou positionner quelque chose. C'est-à-dire : à l'intérieur des barres de défilement s'il y en a. Nous devons donc utiliser`documentElement.clientHeight/Width`.
33
33
````
34
34
35
-
```warn header="`DOCTYPE` is important"
36
-
Please note: top-level geometry properties may work a little bit differently when there's no `<!DOCTYPE HTML>` in HTML. Odd things are possible.
35
+
```warn header="`Le DOCTYPE` est important"
36
+
Remarque: les propriétés de géométrie de niveau supérieur peuvent fonctionner un peu différemment lorsqu'il n'y a pas de `<!DOCTYPE HTML>` dans HTML. Des choses étranges sont possibles.
37
37
38
-
In modern HTML we should always write `DOCTYPE`.
38
+
Dans le HTML moderne, nous devons toujours écrire le `DOCTYPE`.
39
39
```
40
40
41
-
## Width/height of the document
41
+
## Largeur/hauteur du document
42
42
43
-
Theoretically, as the root document element is `document.documentElement`, and it encloses all the content, we could measure document full size as `document.documentElement.scrollWidth/scrollHeight`.
43
+
Théoriquement, comme l'élément de document racine est `document.documentElement` et qu'il contient tout le contenu, nous pourrions mesurer le document en taille réelle comme `document.documentElement.scrollWidth/scrollHeight`.
44
44
45
-
But on that element, for the whole page, these properties do not work as intended. In Chrome/Safari/Opera if there's no scroll, then `documentElement.scrollHeight` may be even less than `documentElement.clientHeight`! Sounds like a nonsense, weird, right?
45
+
Mais sur cet élément, pour la page entière, ces propriétés ne fonctionnent pas comme prévu. Dans Chrome/Safari/Opera s'il n'y a pas de défilement, alors `documentElement.scrollHeight` peut être encore moins que `documentElement.clientHeight` ! Cela ressemble à un non-sens, bizarre, non ?
46
46
47
-
To reliably obtain the full document height, we should take the maximum of these properties:
47
+
Pour obtenir de manière fiable la pleine hauteur du document, nous devons prendre le maximum de ces propriétés :
48
48
49
49
```js run
50
50
let scrollHeight = Math.max(
@@ -56,101 +56,101 @@ let scrollHeight = Math.max(
56
56
alert('Full document height, with scrolled out part: ' + scrollHeight);
57
57
```
58
58
59
-
Why so? Better don't ask. These inconsistencies come from ancient times, not a "smart" logic.
59
+
Pourquoi ? Mieux vaut ne pas demander. Ces incohérences viennent des temps anciens, pas d'une logique "intelligente".
60
60
61
-
## Get the current scroll [#page-scroll]
61
+
## Obtenez le défilement actuel [#page-scroll]
62
62
63
-
DOM elements have their current scroll state in `elem.scrollLeft/scrollTop`.
63
+
Les éléments DOM ont leur état de défilement actuel dans `elem.scrollLeft/scrollTop`.
64
64
65
-
For document scroll `document.documentElement.scrollLeft/Top` works in most browsers, except older WebKit-based ones, like Safari (bug [5991](https://bugs.webkit.org/show_bug.cgi?id=5991)), where we should use `document.body` instead of `document.documentElement`.
65
+
Pour le défilement de document, `document.documentElement.scrollLeft/Top` fonctionne dans la plupart des navigateurs, à l'exception des plus anciens basés sur WebKit, comme Safari (bug [5991](https://bugs.webkit.org/show_bug.cgi?id=5991)), où nous devrions utiliser `document.body` au lieu de `document.documentElement`.
66
66
67
-
Luckily, we don't have to remember these peculiarities at all, because the scroll is available in the special properties `window.pageXOffset/pageYOffset`:
67
+
Heureusement, nous n'avons pas du tout à nous souvenir de ces particularités, car le défilement est disponible dans les propriétés spéciales `window.pageXOffset/pageYOffset`:
68
68
69
69
```js run
70
70
alert('Current scroll from the top: ' + window.pageYOffset);
71
71
alert('Current scroll from the left: ' + window.pageXOffset);
To scroll the page from JavaScript, its DOM must be fully built.
79
+
Pour faire défiler la page à partir de JavaScript, son DOM doit être entièrement construit.
80
80
81
-
For instance, if we try to scroll the page from the script in `<head>`, it won't work.
81
+
Par exemple, si nous essayons de faire défiler la page à partir du script dans `<head>`, cela ne fonctionnera pas.
82
82
```
83
83
84
-
Regular elements can be scrolled by changing `scrollTop/scrollLeft`.
84
+
Les éléments réguliers peuvent défiler en changeant `scrollTop/scrollLeft`.
85
85
86
-
We can do the same for the page using `document.documentElement.scrollTop/Left` (except Safari, where `document.body.scrollTop/Left` should be used instead).
86
+
Nous pouvons faire de même pour la page utilisant `document.documentElement.scrollTop/Left` (sauf Safari, où `document.body.scrollTop/Left` devrait être utilisé à la place).
87
87
88
-
Alternatively, there's a simpler, universal solution: special methods [window.scrollBy(x,y)](mdn:api/Window/scrollBy) and [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
88
+
Alternativement, il existe une solution plus simple et universelle: des méthodes spéciales [window.scrollBy(x,y)](mdn:api/Window/scrollBy) et [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
89
89
90
-
- The method `scrollBy(x,y)` scrolls the page *relative to its current position*. For instance, `scrollBy(0,10)` scrolls the page `10px` down.
90
+
- La méthode `scrollBy(x,y)` fait défiler la page *par rapport à sa position actuelle*. Par exemple, `scrollBy(0,10)` fait défiler la page `10px` vers le bas.
- The method `scrollTo(pageX,pageY)` scrolls the page *to absolute coordinates*, so that the top-left corner of the visible part has coordinates `(pageX, pageY)` relative to the document's top-left corner. It's like setting `scrollLeft/scrollTop`.
97
+
- La méthode `scrollTo(pageX,pageY)` fait défiler la page *jusqu'aux coordonnées absolues*, de sorte que le coin supérieur gauche de la partie visible ait les coordonnées `(pageX, pageY)` par rapport au coin supérieur gauche du document. C'est comme définir `scrollLeft/scrollTop`.
98
98
99
-
To scroll to the very beginning, we can use `scrollTo(0,0)`.
99
+
Pour faire défiler jusqu'au tout début, nous pouvons utiliser `scrollTo(0,0)`.
Ces méthodes fonctionnent de la même manière pour tous les navigateurs.
106
106
107
107
## scrollIntoView
108
108
109
-
For completeness, let's cover one more method: [elem.scrollIntoView(top)](mdn:api/Element/scrollIntoView).
109
+
Pour être complet, couvrons une autre méthode : [elem.scrollIntoView(top)](mdn:api/Element/scrollIntoView).
110
110
111
-
The call to `elem.scrollIntoView(top)` scrolls the page to make `elem` visible. It has one argument:
111
+
L'appel à `elem.scrollIntoView(top)` fait défiler la page pour rendre `elem` visible. Il a un argument:
112
112
113
-
- if `top=true` (that's the default), then the page will be scrolled to make `elem` appear on the top of the window. The upper edge of the element is aligned with the window top.
114
-
- if `top=false`, then the page scrolls to make `elem` appear at the bottom. The bottom edge of the element is aligned with the window bottom.
113
+
- si `top=true` (c'est la valeur par défaut), alors la page défilera pour faire apparaître `elem` en haut de la fenêtre. Le bord supérieur de l'élément est aligné avec le haut de la fenêtre.
114
+
- si `top=false`, alors la page défile pour faire apparaître `elem` en bas. Le bord inférieur de l'élément est aligné avec le bas de la fenêtre.
115
115
116
116
```online
117
-
The button below scrolls the page to make itself show at the window top:
117
+
Le bouton ci-dessous fait défiler la page pour aligner l'élément en haut de la fenêtre :
Sometimes we need to make the document "unscrollable". For instance, when we need to cover it with a large message requiring immediate attention, and we want the visitor to interact with that message, not with the document.
128
+
Parfois, nous devons rendre le document "non-défilable". Par exemple, lorsque nous devons le couvrir d'un gros message nécessitant une attention immédiate et que nous voulons que le visiteur interagisse avec ce message, pas avec le document.
129
129
130
-
To make the document unscrollable, it's enough to set `document.body.style.overflow = "hidden"`. The page will freeze on its current scroll.
130
+
Pour rendre le document impossible à faire défiler, il suffit de définir `document.body.style.overflow = "hidden"`. La page se fige sur son défilement actuel.
The first button freezes the scroll, the second one resumes it.
139
+
Le premier bouton fige le défilement, le second le reprend.
140
140
```
141
141
142
-
We can use the same technique to "freeze" the scroll for other elements, not just for `document.body`.
142
+
Nous pouvons utiliser la même technique pour "figer" le défilement pour d'autres éléments, pas seulement pour `document.body`.
143
143
144
-
The drawback of the method is that the scrollbar disappears. If it occupied some space, then that space is now free, and the content "jumps" to fill it.
144
+
L'inconvénient de la méthode est que la barre de défilement disparaît. S'il occupait de l'espace, cet espace est désormais libre et le contenu "saute" pour le remplir.
145
145
146
-
That looks a bit odd, but can be worked around if we compare `clientWidth` before and after the freeze, and if it increased (the scrollbar disappeared) then add `padding` to `document.body` in place of the scrollbar, to keep the content width the same.
146
+
Cela semble un peu étrange, mais peut être contourné si nous comparons `clientWidth` avant et après le gel, et s'il a augmenté (la barre de défilement a disparu), puis ajoutez un `padding` à `document.body` à la place de la barre de défilement, pour conservez la même largeur de contenu.
147
147
148
-
## Summary
148
+
## Résumé
149
149
150
-
Geometry:
150
+
Géométrie :
151
151
152
-
- Width/height of the visible part of the document (content area width/height): `document.documentElement.clientWidth/Height`
153
-
- Width/height of the whole document, with the scrolled out part:
152
+
- Largeur/hauteur de la partie visible du document (largeur/hauteur de la zone de contenu) : `document.documentElement.clientWidth/Height`
153
+
- Largeur/hauteur de l'ensemble du document, avec la partie déroulante :
154
154
155
155
```js
156
156
let scrollHeight = Math.max(
@@ -160,11 +160,11 @@ Geometry:
160
160
);
161
161
```
162
162
163
-
Scrolling:
163
+
Défilement :
164
164
165
-
- Read the current scroll: `window.pageYOffset/pageXOffset`.
166
-
- Change the current scroll:
165
+
- Lire le défilement actuel : `window.pageYOffset/pageXOffset`.
0 commit comments