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
Copy file name to clipboardExpand all lines: 2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,6 +6,6 @@ importance: 3
6
6
7
7
Write the code that returns the width of a standard scrollbar.
8
8
9
-
For Windows it usually varies between `12px` and `20px`. If the browser doesn't reserves any space for it, then it may be `0px`.
9
+
For Windows it usually varies between `12px` and `20px`. If the browser doesn't reserve any space for it (the scrollbar is half-translucent over the text, also happens), then it may be `0px`.
10
10
11
11
P.S. The code should work for any HTML document, do not depend on its content.
Copy file name to clipboardExpand all lines: 2-ui/1-document/09-size-and-scroll/article.md
+28-29Lines changed: 28 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,8 +2,7 @@
2
2
3
3
There are many JavaScript properties that allow us to read information about element width, height and other geometry features.
4
4
5
-
We often need them when moving or positioning elements in JavaScript, to correctly calculate coordinates.
6
-
5
+
We often need them when moving or positioning elements in JavaScript.
7
6
8
7
## Sample element
9
8
@@ -18,8 +17,8 @@ As a sample element to demonstrate properties we'll use the one given below:
18
17
width: 300px;
19
18
height: 200px;
20
19
border: 25pxsolid#E8C48F;
21
-
padding: 20px;
22
-
overflow: auto;
20
+
padding: 20px;
21
+
overflow: auto;
23
22
}
24
23
</style>
25
24
```
@@ -33,26 +32,24 @@ The element looks like this:
33
32
You can [open the document in the sandbox](sandbox:metric).
34
33
35
34
```smart header="Mind the scrollbar"
36
-
The picture above demonstrates the most complex case when the element has a scrollbar. Some browsers (not all) reserve the space for it by taking it from the content.
35
+
The picture above demonstrates the most complex case when the element has a scrollbar. Some browsers (not all) reserve the space for it by taking it from the content (labeled as "content width" above).
37
36
38
-
So, without scrollbar the content width would be `300px`, but if the scrollbar is `16px` wide (the width may vary between devices and browsers) then only `300 - 16 = 284px` remains, and we should take it into account. That's why examples from this chapter assume that there's a scrollbar. If there's no scrollbar, then things are just a bit simpler.
37
+
So, without scrollbar the content width would be `300px`, but if the scrollbar is `16px` wide (the width may vary between devices and browsers) then only `300 - 16 = 284px` remains, and we should take it into account. That's why examples from this chapter assume that there's a scrollbar. Without it, some calculations are simpler.
39
38
```
40
39
41
-
```smart header="The `padding-bottom` may be filled with text"
42
-
Usually paddings are shown empty on illustrations, but if there's a lot of text in the element and it overflows, then browsers show the "overflowing" text at `padding-bottom`, so you can see that in examples. But the padding is still there, unless specified otherwise.
40
+
```smart header="The `padding-bottom`area may be filled with text"
41
+
Usually paddings are shown empty on our illustrations, but if there's a lot of text in the element and it overflows, then browsers show the "overflowing" text at `padding-bottom`, that's normal.
43
42
```
44
43
45
44
## Geometry
46
45
47
-
Element properties that provide width, height and other geometry are always numbers. They are assumed to be in pixels.
48
-
49
-
Here's the overall picture:
46
+
Here's the overall picture with geometry properties:
50
47
51
48
52
49
53
-
They are many properties, it's difficult to fit them all in the single picture, but their values are simple and easy to understand.
50
+
Values of these properties are technically numbers, but these numbers are "of pixels", so these are pixel measurements.
54
51
55
-
Let's start exploring them from the outside of the element.
52
+
Let's start exploring the properties starting from the outside of the element.
56
53
57
54
## offsetParent, offsetLeft/Top
58
55
@@ -66,7 +63,7 @@ That's the nearest ancestor that is one of the following:
66
63
2. `<td>`, `<th>`, or `<table>`, or
67
64
3. `<body>`.
68
65
69
-
In most practical cases we can use `offsetParent` to get the nearest CSS-positioned ancestor. And `offsetLeft/offsetTop` provide x/y coordinates relative to its upper-left corner.
66
+
Properties `offsetLeft/offsetTop` provide x/y coordinates relative to `offsetParent` upper-left corner.
70
67
71
68
In the example below the inner `<div>` has `<main>` as `offsetParent` and `offsetLeft/offsetTop` shifts from its upper-left corner (`180`):
72
69
@@ -85,7 +82,6 @@ In the example below the inner `<div>` has `<main>` as `offsetParent` and `offse
85
82
86
83
87
84
88
-
89
85
There are several occasions when `offsetParent` is `null`:
90
86
91
87
1. For not shown elements (`display:none` or not in the document).
@@ -105,12 +101,12 @@ For our sample element:
105
101
-`offsetWidth = 390` -- the outer width, can be calculated as inner CSS-width (`300px`) plus paddings (`2 * 20px`) and borders (`2 * 25px`).
106
102
-`offsetHeight = 290` -- the outer height.
107
103
108
-
````smart header="Geometry properties for not shown elements are zero/null"
109
-
Geometry properties are calculated only for shown elements.
104
+
````smart header="Geometry properties are zero/null for elements that are not displayed"
105
+
Geometry properties are calculated only for displayed elements.
110
106
111
107
If an element (or any of its ancestors) has `display:none` or is not in the document, then all geometry properties are zero (or `null` for `offsetParent`).
112
108
113
-
For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0`.
109
+
For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0` when we created an element, but haven't inserted it into the document yet, or it (or its ancestor) has `display:none`.
114
110
115
111
We can use this to check if an element is hidden, like this:
116
112
@@ -136,13 +132,15 @@ In our example:
136
132
137
133
138
134
139
-
...But to be precise -- they are not borders, but relative coordinates of the inner side from the outer side.
135
+
...But to be precise -- these properties are not border width/height, but rather relative coordinates of the inner side from the outer side.
140
136
141
137
What's the difference?
142
138
143
139
It becomes visible when the document is right-to-left (the operating system is in Arabic or Hebrew languages). The scrollbar is then not on the right, but on the left, and then `clientLeft` also includes the scrollbar width.
144
140
145
-
In that case, `clientLeft` would be not `25`, but with the scrollbar width `25 + 16 = 41`:
141
+
In that case, `clientLeft` would be not `25`, but with the scrollbar width `25 + 16 = 41`.
142
+
143
+
Here's the example in hebrew:
146
144
147
145
148
146
@@ -154,7 +152,9 @@ They include the content width together with paddings, but without the scrollbar
154
152
155
153
156
154
157
-
On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so it's exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2 * 20px`) total `240px`.
155
+
On the picture above let's first consider `clientHeight`.
156
+
157
+
There's no horizontal scrollbar, so it's exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2 * 20px`) total `240px`.
158
158
159
159
Now `clientWidth` -- here the content width is not `300px`, but `284px`, because `16px` are occupied by the scrollbar. So the sum is `284px` plus left and right paddings, total `324px`.
160
160
@@ -166,8 +166,7 @@ So when there's no padding we can use `clientWidth/clientHeight` to get the cont
166
166
167
167
## scrollWidth/Height
168
168
169
-
- Properties `clientWidth/clientHeight` only account for the visible part of the element.
170
-
- Properties `scrollWidth/scrollHeight` also include the scrolled out (hidden) parts:
169
+
These properties are like `clientWidth/clientHeight`, but they also include the scrolled out (hidden) parts:
171
170
172
171
173
172
@@ -217,11 +216,11 @@ Setting `scrollTop` to `0` or a big value, such as `1e9` will make the element s
217
216
218
217
## Don't take width/height from CSS
219
218
220
-
We've just covered geometry properties of DOM elements. They are normally used to get widths, heights and calculate distances.
219
+
We've just covered geometry properties of DOM elements, that can be used to get widths, heights and calculate distances.
221
220
222
221
But as we know from the chapter <info:styles-and-classes>, we can read CSS-height and width using `getComputedStyle`.
223
222
224
-
So why not to read the width of an element like this?
223
+
So why not to read the width of an element with `getComputedStyle`, like this?
225
224
226
225
```js run
227
226
let elem = document.body;
@@ -231,7 +230,7 @@ alert( getComputedStyle(elem).width ); // show CSS width for elem
231
230
232
231
Why should we use geometry properties instead? There are two reasons:
233
232
234
-
1. First, CSS width/height depend on another property: `box-sizing` that defines "what is" CSS width and height. A change in `box-sizing` for CSS purposes may break such JavaScript.
233
+
1. First, CSS `width/height` depend on another property: `box-sizing` that defines "what is" CSS width and height. A change in `box-sizing` for CSS purposes may break such JavaScript.
235
234
2. Second, CSS `width/height` may be `auto`, for instance for an inline element:
236
235
237
236
```html run
@@ -271,7 +270,7 @@ Elements have the following geometry properties:
271
270
- `offsetWidth/offsetHeight` -- "outer" width/height of an element including borders.
272
271
- `clientLeft/clientTop` -- the distances from the upper-left outer corner to the upper-left inner (content + padding) corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so `clientLeft` includes its width too.
273
272
- `clientWidth/clientHeight` -- the width/height of the content including paddings, but without the scrollbar.
274
-
- `scrollWidth/scrollHeight` -- the width/height of the content including the scrolled out parts. Also includes paddings, but not the scrollbar.
275
-
- `scrollLeft/scrollTop` -- width/height of the scrolled out part of the element, starting from its upper-left corner.
273
+
- `scrollWidth/scrollHeight` -- the width/height of the content, just like `clientWidth/clientHeight`, but also include scrolled-out, invisible part of the element.
274
+
- `scrollLeft/scrollTop` -- width/height of the scrolled out upper part of the element, starting from its upper-left corner.
276
275
277
-
All properties are read-only except `scrollLeft/scrollTop`. They make the browser scroll the element if changed.
276
+
All properties are read-only except `scrollLeft/scrollTop` that make the browser scroll the element if changed.
0 commit comments