Skip to content

Commit dc0a638

Browse files
committed
minor
1 parent bdf28d6 commit dc0a638

File tree

1 file changed

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

1 file changed

+11
-13
lines changed

2-ui/1-document/10-size-and-scroll-window/article.md

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
How to find out the width and height of the browser window? How to get the full width and height of the document, including the scrolled out part? How to scroll the page using JavaScript?
44

5-
From the DOM point of view, the root document element is `document.documentElement`. That element corresponds to `<html>` and has geometry properties described in the [previous chapter](info:size-and-scroll). For some cases we can use it, but there are additional methods and peculiarities important enough to consider.
5+
For most such requests, we can use the root document element `document.documentElement`, that corresponds to `<html>` tag. But there are additional methods and peculiarities important enough to consider.
66

77
## Width/height of the window
88

9-
Properties `clientWidth/clientHeight` of `document.documentElement` is exactly what we want here:
9+
To get window width and height we can use `clientWidth/clientHeight` of `document.documentElement`:
1010

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

@@ -21,7 +21,7 @@ Browsers also support properties `window.innerWidth/innerHeight`. They look like
2121

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

24-
...And `window.innerWidth/innerHeight` ignore the scrollbar.
24+
...And `window.innerWidth/innerHeight` include the scrollbar.
2525

2626
If there's a scrollbar, and it occupies some space, then these two lines show different values:
2727
```js run
@@ -35,14 +35,14 @@ In most cases we need the *available* window width: to draw or position somethin
3535
```warn header="`DOCTYPE` is important"
3636
Please note: top-level geometry properties may work a little bit differently when there's no `<!DOCTYPE HTML>` in HTML. Odd things are possible.
3737
38-
In modern HTML we should always write `DOCTYPE`. Generally that's not a JavaScript question, but here it affects JavaScript as well.
38+
In modern HTML we should always write `DOCTYPE`.
3939
```
4040
4141
## Width/height of the document
4242
43-
Theoretically, as the root document element is `documentElement.clientWidth/Height`, and it encloses all the content, we could measure its full size as `documentElement.scrollWidth/scrollHeight`.
43+
Theoretically, as the root document element is `documentElement.clientWidth/Height`, and it encloses all the content, we could measure document full size as `documentElement.scrollWidth/scrollHeight`.
4444
45-
These properties work well for regular elements. But 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+
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?
4646
4747
To reliably obtain the full document height, we should take the maximum of these properties:
4848
@@ -62,7 +62,7 @@ Why so? Better don't ask. These inconsistencies come from ancient times, not a "
6262
6363
DOM elements have their current scroll state in `elem.scrollLeft/scrollTop`.
6464
65-
For document scroll `document.documentElement.scrollLeft/Top` works in most browsers, except oldler 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` there.
65+
For document scroll `document.documentElement.scrollLeft/Top` works in most browsers, except oldler 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`.
6666
6767
Luckily, we don't have to remember these peculiarities at all, because the scroll is available in the special properties `window.pageXOffset/pageYOffset`:
6868
@@ -83,20 +83,18 @@ For instance, if we try to scroll the page from the script in `<head>`, it won't
8383
8484
Regular elements can be scrolled by changing `scrollTop/scrollLeft`.
8585
86-
We can do the same for the page, but as explained above:
87-
- For most browsers (except older Webkit-based) `document.documentElement.scrollTop/Left` is the right property.
88-
- Otherwise, `document.body.scrollTop/Left`.
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).
8987
90-
These cross-browser incompatibilities are not good. Fortunately, 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+
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).
9189
92-
- The method `scrollBy(x,y)` scrolls the page relative to its current position. For instance, `scrollBy(0,10)` scrolls the page `10px` down.
90+
- The method `scrollBy(x,y)` scrolls the page *relative to its current position*. For instance, `scrollBy(0,10)` scrolls the page `10px` down.
9391
9492
```online
9593
The button below demonstrates this:
9694
9795
<button onclick="window.scrollBy(0,10)">window.scrollBy(0,10)</button>
9896
```
99-
- 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+
- 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`.
10098
10199
To scroll to the very beginning, we can use `scrollTo(0,0)`.
102100

0 commit comments

Comments
 (0)