jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Update article.md

Browse source
This commit is contained in:
Alexander 2018-01-07 23:15:45 +03:00 • committed by GitHub
parent 0130a5967e
commit 86c61f4a11
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

28
2-ui/1-document/09-size-and-scroll/article.md
View file

@ -1,6 +1,6 @@
# Element size and scrolling # Element size and scrolling
There are many JavaScript properties that allow to read information about element width, height and other geometry features. There are many JavaScript properties that allow us to read information about element width, height and other geometry features.
We often need them when moving or positioning elements in JavaScript, to correctly calculate coordinates. We often need them when moving or positioning elements in JavaScript, to correctly calculate coordinates.
@ -68,7 +68,7 @@ The `offsetParent` is the nearest ancestor that is:
In most practical cases we can use `offsetParent` to get the nearest CSS-positioned ancestor. And `offsetLeft/offsetTop` provide x/y coordinates relative to it's left-upper corner. In most practical cases we can use `offsetParent` to get the nearest CSS-positioned ancestor. And `offsetLeft/offsetTop` provide x/y coordinates relative to it's left-upper corner.
In the example below the inner `<div>` has `<main>` as `offsetParent` and `offsetLeft/offsetTop` are shifts from its left-upper corner (`180`): In the example below the inner `<div>` has `<main>` as `offsetParent` and `offsetLeft/offsetTop` shifts from its left-upper corner (`180`):
```html run height=10 ```html run height=10
<main style="position: relative" id="main"> <main style="position: relative" id="main">
@ -90,11 +90,11 @@ There are several occasions when `offsetParent` is `null`:
1. For not shown elements (`display:none` or not in the document). 1. For not shown elements (`display:none` or not in the document).
2. For `<body>` and `<html>`. 2. For `<body>` and `<html>`.
3. For elements with `position:fixed` on them. 3. For elements with `position:fixed`.
## offsetWidth/Height ## offsetWidth/Height
Now let's move to the element itself. Now let's move on to the element itself.
These two properties are the simplest ones. They provide the "outer" width/height of the element. Or, in other words, its full size including borders. These two properties are the simplest ones. They provide the "outer" width/height of the element. Or, in other words, its full size including borders.
@ -140,9 +140,9 @@ In our example:
What's the difference? What's the difference?
It becomes visible when the document is right-to-left (the operation 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. 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.
In that case `clientLeft` in our example would be not `25`, but with the scrollbar width `25+16=41`: In that case, `clientLeft` would be not `25`, but with the scrollbar width `25 + 16 = 41`:
![](metric-client-left-top-rtl.png) ![](metric-client-left-top-rtl.png)
@ -167,13 +167,13 @@ So when there's no padding we can use `clientWidth/clientHeight` to get the cont
## scrollWidth/Height ## scrollWidth/Height
- Properties `clientWidth/clientHeight` only account for the visible part of the element. - Properties `clientWidth/clientHeight` only account for the visible part of the element.
- Properties `scrollWidth/scrollHeight` also include the scrolled out (hidden) part: - Properties `scrollWidth/scrollHeight` also include the scrolled out (hidden) parts:
![](metric-scroll-width-height.png) ![](metric-scroll-width-height.png)
On the picture above: On the picture above:
- `scrollHeight = 723` -- is the full inner height of the content area including the scrolled out part. - `scrollHeight = 723` -- is the full inner height of the content area including the scrolled out parts.
- `scrollWidth = 324` -- is the full inner width, here we have no horizontal scroll, so it equals `clientWidth`. - `scrollWidth = 324` -- is the full inner width, here we have no horizontal scroll, so it equals `clientWidth`.
We can use these properties to expand the element wide to its full width/height. We can use these properties to expand the element wide to its full width/height.
@ -182,7 +182,7 @@ Like this:
```js ```js
// expand the element to the full content height // expand the element to the full content height
element.style.height = element.scrollHeight + 'px'; element.style.height = `${element.scrollHeight}px`;
``` ```
```online ```online
@ -190,7 +190,7 @@ Click the button to expand the element:
<div id="element" style="width:300px;height:200px; padding: 0;overflow: auto; border:1px solid black;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> <div id="element" style="width:300px;height:200px; padding: 0;overflow: auto; border:1px solid black;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
<button style="padding:0" onclick="element.style.height = element.scrollHeight + 'px'">element.style.height = element.scrollHeight + 'px'</button> <button style="padding:0" onclick="element.style.height = `${element.scrollHeight}px`">element.style.height = `${element.scrollHeight}px`</button>
``` ```
## scrollLeft/scrollTop ## scrollLeft/scrollTop
@ -207,7 +207,7 @@ In other words, `scrollTop` is "how much is scrolled up".
Most geometry properties that are read-only, but `scrollLeft/scrollTop` can be changed, and the browser will scroll the element. Most geometry properties that are read-only, but `scrollLeft/scrollTop` can be changed, and the browser will scroll the element.
```online ```online
If you click the element below, the code `elem.scrollTop+=10` executes. That makes the element content scroll `10px` below. If you click the element below, the code `elem.scrollTop += 10` executes. That makes the element content scroll `10px` down.
<div onclick="this.scrollTop+=10" style="cursor:pointer;border:1px solid black;width:100px;height:80px;overflow:auto">Click<br>Me<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div> <div onclick="this.scrollTop+=10" style="cursor:pointer;border:1px solid black;width:100px;height:80px;overflow:auto">Click<br>Me<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div>
``` ```
@ -229,7 +229,7 @@ let elem = document.body;
alert( getComputedStyle(elem).width ); // show CSS width for elem alert( getComputedStyle(elem).width ); // show CSS width for elem
``` ```
Why we should use geometry properties instead? There are two reasons: Why should we use geometry properties instead? There are two reasons:
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. 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.
2. Second, CSS `width/height` may be `auto`, for instance for an inline element: 2. Second, CSS `width/height` may be `auto`, for instance for an inline element:
@ -260,7 +260,7 @@ The element with text has CSS `width:300px`.
On a Desktop Windows OS, Firefox, Chrome, Edge all reserve the space for the scrollbar. But Firefox shows `300px`, while Chrome and Edge show less. That's because Firefox returns the CSS width and other browsers return the "real" width. On a Desktop Windows OS, Firefox, Chrome, Edge all reserve the space for the scrollbar. But Firefox shows `300px`, while Chrome and Edge show less. That's because Firefox returns the CSS width and other browsers return the "real" width.
``` ```
Please note that the described difference are only about reading `getComputedStyle(...).width` from JavaScript, visually everything is correct. Please note that the described difference is only about reading `getComputedStyle(...).width` from JavaScript, visually everything is correct.
## Summary ## Summary
@ -271,7 +271,7 @@ Elements have the following geometry properties:
- `offsetWidth/offsetHeight` -- "outer" width/height of an element including borders. - `offsetWidth/offsetHeight` -- "outer" width/height of an element including borders.
- `clientLeft/clientTop` -- the distance from the left-upper outer corner to its left-upper inner 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. - `clientLeft/clientTop` -- the distance from the left-upper outer corner to its left-upper inner 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.
- `clientWidth/clientHeight` -- the width/height of the content including paddings, but without the scrollbar. - `clientWidth/clientHeight` -- the width/height of the content including paddings, but without the scrollbar.
- `scrollWidth/scrollHeight` -- the width/height of the content including the scrolled out part. Also includes paddings, but not the scrollbar. - `scrollWidth/scrollHeight` -- the width/height of the content including the scrolled out parts. Also includes paddings, but not the scrollbar.
- `scrollLeft/scrollTop` -- width/height of the scrolled out part of the element, starting from its left-upper corner. - `scrollLeft/scrollTop` -- width/height of the scrolled out part of the element, starting from its left-upper corner.
All properties are read-only except `scrollLeft/scrollTop`. They make the browser scroll the element if changed. All properties are read-only except `scrollLeft/scrollTop`. They make the browser scroll the element if changed.