2-ui/1-document/09-size-and-scroll (#213)

* 2-ui/1-document/09-size-and-scroll

* 2-ui/1-document/09-size-and-scroll

* 2-ui/1-document/09-size-and-scroll

* Update task.md

* Update solution.md

* Update solution.md

* Update article.md

* Update solution.md

* Update solution.md

* Update task.md

* Update article.md

* Update solution.md

* Update task.md

Author: doctype233

2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md

@@ -1,7 +1,7 @@
-The solution is:
+解决方式：
 
 ```js
 let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
 ```
 
-In other words: (full height) minus (scrolled out top part) minus (visible part) -- that's exactly the scrolled out bottom part.
+换句话说：（完全高度）减去（已滚动的高度）减去（可见部分的高度）— 得到的结果就是下方隐藏部分的高度。

2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md

@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# What's the scroll from the bottom?
+# 相对于底部滚动了多少？
 
-The `elem.scrollTop` property is the size of the scrolled out part from the top. How to get "`scrollBottom`" -- the size from the bottom?
+ `elem.scrollTop` 属性是从顶部滚动出来的部分的大小，何获得 `scrollBottom` —— 从底部滚动的尺寸？
 
-Write the code that works for an arbitrary `elem`.
+编写适用于任意元素的代码。
 
-P.S. Please check your code: if there's no scroll or the element is fully scrolled down, then it should return `0`.
+P.S. 请检查您的代码：如果没有滚动条或元素完全向下滚动，那么它应该返回 “0”。

2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md

@@ -1,16 +1,16 @@
-To get the scrollbar width, we can create an element with the scroll, but without borders and paddings.
+为了获得滚动条宽度，我们可以创建一个带有滚动条的元素，但是没有边框和内间距。
 
-Then the difference between its full width `offsetWidth` and the inner content area width `clientWidth` will be exactly the scrollbar:
+然后，它的完全宽度 `offsetWidth` 和内容宽度 `clientWidth` 之间的差就是滚动条的宽度：
 
 ```js run
-// create a div with the scroll
+// 创建一个包含滚动条的块
 let div = document.createElement('div');
 
 div.style.overflowY = 'scroll';
 div.style.width = '50px';
 div.style.height = '50px';
 
-// must put it in the document, otherwise sizes will be 0
+// 必须添加到文档中，否则尺寸为 0
 document.body.append(div);
 let scrollWidth = div.offsetWidth - div.clientWidth;
 

2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md

@@ -2,10 +2,10 @@ importance: 3
 
 ---
 
-# What is the scrollbar width?
+# 怎样计算滚动条宽度？
 
-Write the code that returns the width of a standard scrollbar.
+编写返回标准滚动条宽度的代码。
 
-For Windows it usually varies between `12px` and `20px`. If the browser doesn't reserves any space for it, then it may be `0px`.
+对于Windows，它通常在 `12px` 和 `20px` 之间变化。如果浏览器不为它保留任何空间，那么它可能是 `0px`。
 
-P.S. The code should work for any HTML document, do not depend on its content.
+P.S. 代码应该适用于任何HTML文档，且不依赖于它的内容元素。

2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md

@@ -1,50 +1,50 @@
-The ball has `position:absolute`. It means that its `left/top` coordinates are measured from the nearest positioned element, that is `#field` (because it has `position:relative`).
+为小球设置 `position:absolute`。这意味着它的 `left/top` 坐标根据相对它最近的并且设置了定位的元素来测量，这个元素的有效范围就是 `#field`（因为它有 `position:relative`）。
 
-The coordinates start from the inner left-upper corner of the field:
+坐标从设置了相对定位的最近的元素的左上角开始：
 
 ![](field.png)
 
-The inner field width/height is `clientWidth/clientHeight`. So the field center has coordinates `(clientWidth/2, clientHeight/2)`.
+该元素内容区域的宽/高是 `clientWidth/clientHeight`，所以该元素有效范围的中心的坐标为 `(clientWidth/2, clientHeight/2)`。
 
-...But if we set `ball.style.left/top` to such values, then not the ball as a whole, but the left-upper edge of the ball would be in the center:
+...不过如果我们将 `ball.style.left/top` 设置为上面计算出的值，那么最终的效果与有效范围的中心重合的不是小球的中心，而是小球左上角的坐标：
 
 ```js
 ball.style.left = Math.round(field.clientWidth / 2) + 'px';
 ball.style.top = Math.round(field.clientHeight / 2) + 'px';
 ```
 
-Here's how it looks:
+这是它将显示出的效果：
 
 [iframe height=180 src="ball-half"]
 
-To align the ball center with the center of the field, we should move the ball to the half of its width to the left and to the half of its height to the top:
+为了把球中心和有效范围中心对准，我们应该把球移到左边宽度的一半，把 top 设置为有效范围高度的一半：
 
 ```js
 ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
 ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';
 ```
 
-**Attention: the pitfall!**
+**注意：陷阱！**
 
-The code won't work reliably while `<img>` has no width/height:
+如果 `<img>` 没有宽/高，代码将无法正常工作：
 
 ```html
 <img src="ball.png" id="ball">
 ```
 
-When the browser does not know the width/height of an image (from tag attributes or CSS), then it assumes them to equal `0` until the image finishes loading.
+当浏览器还不知道图片的宽/高（图片的尺寸可能来自标签属性或 CSS）的时候它会假设它们的尺寸为 `0`直到图片加载完成。
 
-In real life after the first load browser usually caches the image, and on next loads it will have the size immediately.
+实际使用过程中，浏览器会在图片第一次加载完成后缓存该图片，方便下次再次访问时立即显示图片。
 
-But on the first load the value of `ball.offsetWidth` is `0`. That leads to wrong coordinates.
+但是在第一次加载时 `ball.offsetWidth` 的值为 `0`，这会导致错误的坐标出现。
 
-We should fix that by adding `width/height` to `<img>`:
+此时我们应该为 `<img>` 添加 `width/height` 属性：
 
 ```html
 <img src="ball.png" *!*width="40" height="40"*/!* id="ball">
 ```
 
-...Or provide the size in CSS:
+...或者在 CSS 中提供尺寸：
 
 ```css
 #ball {

2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md

@@ -2,19 +2,19 @@ importance: 5
 
 ---
 
-# Place the ball in the field center
+# 将小球置于有效范围的中心
 
-Here's how the source document looks:
+这是源文件：
 
 [iframe src="source" edit link height=180]
 
-What are coordinates of the field center?
+有效范围的中心坐标是多少？
 
-Calculate them and use to place the ball into the center of the field:
+计算并将小球置于有效范围中心：
 
 [iframe src="solution" height=180]
 
-- The element should be moved by JavaScript, not CSS.
-- The code should work with any ball size (`10`, `20`, `30` pixels) and any field size, not be bound to the given values.
+- 元素应该通过 JavaScript 移除，而不是 CSS。
+- 代码应该在不限制小球尺寸（`10`、`20`、`30` 像素）或任何有效范围内的尺寸的情况下正常运行，而不是直接为元素绑定尺寸。
 
-P.S. Sure, centering could be done with CSS, but here we want exactly JavaScript. Further we'll meet other topics and more complex situations when JavaScript must be used. Here we do a "warm-up".
+P.S. 当然了，置中的操作可以通过 CSS 完成，但是这里我们需要通过 JavaScript 完成。此外，当必须使用 JavaScript 时，我们可能会遇到其他话题或更加复杂的情况，这里我们只是做一个 “热身”。

2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md

@@ -1,6 +1,6 @@
-Differences:
+不同点：
 
-1. `clientWidth` is numeric, while `getComputedStyle(elem).width` returns a string with `px` at the end.
-2. `getComputedStyle` may return non-numeric width like `"auto"` for an inline element.
-3. `clientWidth` is the inner content area of the element plus paddings, while CSS width (with standard `box-sizing`) is the inner conand sometent area *without paddings*.
-4. If there's a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it's not available for content any more), and some do not. The `clientWidth` property is always the same: scrollbar size is substracted if reserved.
+1. `clientWidth` 值是数值，然而 `getComputedStyle(elem).width` 返回一个包含 `px` 的字符串。
+2. `getComputedStyle` 可能返回非数值的结果，例如内联元素的 `"auto"`。
+3. `clientWidth` 是元素的内部内容区域加上内间距，而 CSS 宽度（具有标准的 `box-sizing`）是内部**不包括内间距**的空间区域。
+4. 如果有一个滚动条，一般浏览器保留它的空间，有的浏览器从 CSS 宽度中减去这个空间（因为它不再用于内容），而有些则不这样做。`clientWidth` 属性总是相同的：如果保留了滚动条，那么它的宽度将被删去。

2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md

@@ -2,8 +2,8 @@ importance: 5
 
 ---
 
-# The difference: CSS width versus clientWidth
+# 不同点：CSS 宽度与 clientWidth
 
-What's the difference between `getComputedStyle(elem).width` and `elem.clientWidth`?
+`getComputedStyle(elem).width` 与 `elem.clientWidth` 之间的差别在哪？
 
-Give at least 3 differences. The more the better.
+指出至少三种不同点，越多越好。