minor

iliakan · iliakan · commit 3d4fa7c48966 · 2019-08-18T14:14:23.000+03:00
diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md
@@ -8,12 +8,12 @@ Let's use window-relative coordinates.
 
 The document is represented (and contained) within `<html>` tag, that is `document.documentElement`.
 
-We can get window-relative coordinates of the whole document as `document.documentElement.getBoundingClientRect()`. And the `bottom` property will be window-relative coordinate of the document end.
+We can get window-relative coordinates of the whole document as `document.documentElement.getBoundingClientRect()`, the `bottom` property will be window-relative coordinate of the document bottom.
 
-For instance, if the height of the whole HTML document is 2000px, then:
+For instance, if the height of the whole HTML document is `2000px`, then:
 
 ```js
-// When we're on the top of the page
+// when we're on the top of the page
 // window-relative top = 0
 document.documentElement.getBoundingClientRect().top = 0
 
@@ -41,11 +41,11 @@ document.documentElement.getBoundingClientRect().top = -1400
 document.documentElement.getBoundingClientRect().bottom = 600
 ```
 
-Please note that the bottom can't be 0, because it never reaches the window top. The lowest limit of the bottom coordinate is the window height, we can't scroll it any more up.
+Please note that the `bottom` can't be `0`, because it never reaches the window top. The lowest limit of the `bottom` coordinate is the window height (we assumed it to be `600`), we can't scroll it any more up.
 
-And the window height is `document.documentElement.clientHeight`.
+We can obtain the window height as `document.documentElement.clientHeight`.
 
-We want the document bottom be no more than `100px` away from it.
+For our task, we need to know when the document bottom is not no more than `100px` away from it (that is: `600-700px`, if the height is `600`).
 
 So here's the function:
 
@@ -55,12 +55,11 @@ function populate() {
     // document bottom
     let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
 
-    // if it's greater than window height + 100px, then we're not at the page back
-    // (see examples above, big bottom means we need to scroll more)
-    if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
-
-    // otherwise let's add more data
-    document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
+    // if the user scrolled far enough (<100px to the end)
+    if (windowRelativeBottom < document.documentElement.clientHeight + 100) {
+      // let's add more data
+      document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
+    }
   }
 }
 ```
diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md
@@ -11,6 +11,6 @@ It should work like this:
 - When the page is scrolled down more than the window height -- there appears an "upwards" arrow in the left-top corner. If the page is scrolled back, it disappears.
 - When the arrow is clicked, the page scrolls to the top.
 
-Like this:
+Like this (top-left corner, scroll to see):
 
 [iframe border="1" height="200" link src="solution"]
diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md
@@ -1,8 +1,10 @@
 The `onscroll` handler should check which images are visible and show them.
 
-We also may want to run it when the page loads, to detect immediately visible images prior to any scrolling and load them.
+We also want to run it when the page loads, to detect immediately visible images and load them.
 
-If we put it at the `<body>` bottom, then it runs when the page content is loaded.
+The code should execute when the document is loaded, so that it has access to its content.
+
+Or put it at the `<body>` bottom:
 
 ```js
 // ...the page content is above...
@@ -13,19 +15,35 @@ function isVisible(elem) {
 
   let windowHeight = document.documentElement.clientHeight;
 
-  // top elem edge is visible OR bottom elem edge is visible
+  // top elem edge is visible?
   let topVisible = coords.top > 0 && coords.top < windowHeight;
+
+  // bottom elem edge is visible?
   let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
 
   return topVisible || bottomVisible;
 }
+```
+
+The `showVisible()` function uses the visibility check, implemented by `isVisible()`, to load visible images:
+
+```js
+function showVisible() {
+  for (let img of document.querySelectorAll('img')) {
+    let realSrc = img.dataset.src;
+    if (!realSrc) continue;
+
+    if (isVisible(img)) {
+      img.src = realSrc;
+      img.dataset.src = '';
+    }
+  }
+}
 
 *!*
 showVisible();
 window.onscroll = showVisible;
 */!*
 ```
 
-For visible images we can take `img.dataset.src` and assign it to `img.src` (if not did it yet).
-
-P.S. The solution also has a variant of `isVisible` that "pre-loads" images that are within 1 page  above/below (the page height is `document.documentElement.clientHeight`).
+P.S. The solution also has a variant of `isVisible` that "preloads" images that are within 1 page above/below the current document scroll.
diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md
@@ -1,6 +1,6 @@
 # Scrolling
 
-Scroll events allow to react on a page or element scrolling. There are quite a few good things we can do here.
+The `scroll` event allows to react on a page or element scrolling. There are quite a few good things we can do here.
 
 For instance:
 - Show/hide additional controls or information depending on where in the document the user is.
@@ -24,16 +24,14 @@ The `scroll` event works both on the `window` and on scrollable elements.
 
 ## Prevent scrolling
 
-How do we make something unscrollable? We can't prevent scrolling by using `event.preventDefault()` in `onscroll` listener, because it triggers *after* the scroll has already happened.
+How do we make something unscrollable?
 
-But we can prevent scrolling by `event.preventDefault()` on an event that causes the scroll.
+We can't prevent scrolling by using `event.preventDefault()` in `onscroll` listener, because it triggers *after* the scroll has already happened.
 
-For instance:
-- `wheel` event -- a mouse wheel roll (a "scrolling" touchpad action generates it too).
-- `keydown` event for `key:pageUp` and `key:pageDown`.
+But we can prevent scrolling by `event.preventDefault()` on an event that causes the scroll, for instance `keydown` event for `key:pageUp` and `key:pageDown`.
 
 If we add an event handler to these events and `event.preventDefault()` in it, then the scroll won't start.
 
-Sometimes that may help, but it's more reliable to use CSS to make something unscrollable, such as the `overflow` property.
+There are many ways to initiate a scroll, so it's more reliable to use CSS, `overflow` property.
 
 Here are few tasks that you can solve or look through to see the applications on `onscroll`.
