Skip to content

Commit da2c78a

Browse files
authored
Merge pull request #189 from HachemiH/master
Window sizes and scrolling
2 parents bc0920d + f348ed3 commit da2c78a

File tree

1 file changed

+62
-62
lines changed
  • 2-ui/1-document/10-size-and-scroll-window

1 file changed

+62
-62
lines changed
Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,50 @@
1-
# Window sizes and scrolling
1+
# Tailles des fenêtres et défilement
22

3-
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 ?
44

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.
66

7-
## Width/height of the window
7+
## Largeur/hauteur de la fenêtre
88

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` :
1010

1111
![](document-client-width-height.svg)
1212

1313
```online
14-
For instance, this button shows the height of your window:
14+
Par exemple, ce bouton affiche la hauteur de votre fenêtre :
1515
1616
<button onclick="alert(document.documentElement.clientHeight)">alert(document.documentElement.clientHeight)</button>
1717
```
1818

19-
````warn header="Not `window.innerWidth/Height`"
20-
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 ?
2121

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.
2323

24-
...And `window.innerWidth/innerHeight` include the scrollbar.
24+
… Et `window.innerWidth/innerHeight` inclut la barre de défilement.
2525

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 :
2727
```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
3030
```
3131

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`.
3333
````
3434
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.
3737
38-
In modern HTML we should always write `DOCTYPE`.
38+
Dans le HTML moderne, nous devons toujours écrire le `DOCTYPE`.
3939
```
4040
41-
## Width/height of the document
41+
## Largeur/hauteur du document
4242
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`.
4444
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 ?
4646
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 :
4848
4949
```js run
5050
let scrollHeight = Math.max(
@@ -56,101 +56,101 @@ let scrollHeight = Math.max(
5656
alert('Full document height, with scrolled out part: ' + scrollHeight);
5757
```
5858
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".
6060
61-
## Get the current scroll [#page-scroll]
61+
## Obtenez le défilement actuel [#page-scroll]
6262
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`.
6464
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`.
6666
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` :
6868
6969
```js run
7070
alert('Current scroll from the top: ' + window.pageYOffset);
7171
alert('Current scroll from the left: ' + window.pageXOffset);
7272
```
7373
74-
These properties are read-only.
74+
Ces propriétés sont en lecture seule.
7575
76-
## Scrolling: scrollTo, scrollBy, scrollIntoView [#window-scroll]
76+
## Défilement : scrollTo, scrollBy, scrollIntoView [#window-scroll]
7777
7878
```warn
79-
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.
8080
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.
8282
```
8383
84-
Regular elements can be scrolled by changing `scrollTop/scrollLeft`.
84+
Les éléments réguliers peuvent défiler en changeant `scrollTop/scrollLeft`.
8585
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, `document.body.scrollTop/Left` devrait être utilisé à la place).
8787
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).
8989
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.
9191
9292
```online
93-
The button below demonstrates this:
93+
Le bouton ci-dessous illustre cela:
9494
9595
<button onclick="window.scrollBy(0,10)">window.scrollBy(0,10)</button>
9696
```
97-
- 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`.
9898
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)`.
100100
101101
```online
102102
<button onclick="window.scrollTo(0,0)">window.scrollTo(0,0)</button>
103103
```
104104
105-
These methods work for all browsers the same way.
105+
Ces méthodes fonctionnent de la même manière pour tous les navigateurs.
106106
107107
## scrollIntoView
108108
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).
110110
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 :
112112
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.
115115
116116
```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 :
118118
119119
<button onclick="this.scrollIntoView()">this.scrollIntoView()</button>
120120
121-
And this button scrolls the page to show it at the bottom:
121+
Et ce bouton fait défiler la page pour l'aligner en bas :
122122
123123
<button onclick="this.scrollIntoView(false)">this.scrollIntoView(false)</button>
124124
```
125125
126-
## Forbid the scrolling
126+
## Interdire le défilement
127127
128-
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.
129129
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.
131131
132132
```online
133-
Try it:
133+
Essayez-le :
134134
135135
<button onclick="document.body.style.overflow = 'hidden'">document.body.style.overflow = 'hidden'</button>
136136
137137
<button onclick="document.body.style.overflow = ''">document.body.style.overflow = ''</button>
138138
139-
The first button freezes the scroll, the second one resumes it.
139+
Le premier bouton fige le défilement, le second le reprend.
140140
```
141141
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`.
143143
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.
145145
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.
147147
148-
## Summary
148+
## Résumé
149149
150-
Geometry:
150+
Géométrie :
151151
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 :
154154
155155
```js
156156
let scrollHeight = Math.max(
@@ -160,11 +160,11 @@ Geometry:
160160
);
161161
```
162162
163-
Scrolling:
163+
Défilement :
164164
165-
- Read the current scroll: `window.pageYOffset/pageXOffset`.
166-
- Change the current scroll:
165+
- Lire le défilement actuel : `window.pageYOffset/pageXOffset`.
166+
- Modifiez le défilement actuel :
167167
168-
- `window.scrollTo(pageX,pageY)` -- absolute coordinates,
169-
- `window.scrollBy(x,y)` -- scroll relative the current place,
170-
- `elem.scrollIntoView(top)` -- scroll to make `elem` visible (align with the top/bottom of the window).
168+
- `window.scrollTo(pageX,pageY)` -- coordonnées absolues,
169+
- `window.scrollBy(x,y)` -- défilement par rapport à l'endroit actuel,
170+
- `elem.scrollIntoView(top)` -- défilement pour rendre `elem` visible (alignement avec le haut/bas de la fenêtre).

0 commit comments

Comments
 (0)