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
@@ -1,65 +1,72 @@
-The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we're at the page end.

-We can call it immediately and add as a `window.onscroll` handler.

-The most important question is: "How do we detect that the page is scrolled to bottom?"

-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()`, 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:

```js
-// when we're on the top of the page
// window-relative top = 0
document.documentElement.getBoundingClientRect().top = 0

-// window-relative bottom = 2000
-// the document is long, so that is probably far beyond the window bottom
document.documentElement.getBoundingClientRect().bottom = 2000
```

-If we scroll `500px` below, then:

```js
// document top is above the window 500px
document.documentElement.getBoundingClientRect().top = -500
-// document bottom is 500px closer
document.documentElement.getBoundingClientRect().bottom = 1500
```

-When we scroll till the end, assuming that the window height is `600px`:


```js
-// document top is above the window 1400px
document.documentElement.getBoundingClientRect().top = -1400
-// document bottom is below the window 600px
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 assumed it to be `600`), we can't scroll it any more up.

-We can obtain the window height as `document.documentElement.clientHeight`.

-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:

```js
function populate() {
  while(true) {
-    // document bottom
    let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;

-    // 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/1-endless-page/task.md b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md
@@ -2,19 +2,19 @@ importance: 5

---

-# Endless page

-Create an endless page. When a visitor scrolls it to the end, it auto-appends current date-time to the text (so that a visitor can scroll more).

-Like this:

[iframe src="solution" height=200]

-Please note two important features of the scroll:

-1. **The scroll is "elastic".** We can scroll a little beyond the document start or end in some browsers/devices (empty space below is shown, and then the document will automatically "bounces back" to normal).
-2. **The scroll is imprecise.** When we scroll to page end, then we may be in fact like 0-50px away from the real document bottom.

-So, "scrolling to the end" should mean that the visitor is no more than 100px away from the document end.

-P.S. In real life we may want to show "more messages" or "more goods".
diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/source.view/index.html b/2-ui/3-event-details/8-onscroll/2-updown-button/source.view/index.html
@@ -46,7 +46,7 @@
  <div id="arrowTop"></div>

  <script>
-    // ... your code ...
  </script>

</body>

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
@@ -2,15 +2,17 @@ importance: 5

---

-# Up/down button

-Create a "to the top" button to help with page scrolling.

-It should work like this:
-- While the page is not scrolled down at least for the window height -- it's invisible.
-- 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 (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,21 +1,24 @@
-The `onscroll` handler should check which images are visible and show them.

-We also want to run it when the page loads, to detect immediately visible images and load them.

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

function isVisible(elem) {

  let coords = elem.getBoundingClientRect();

  let windowHeight = document.documentElement.clientHeight;

-  // top elem edge is visible?
  let topVisible = coords.top > 0 && coords.top < windowHeight;

  // bottom elem edge is visible?
@@ -46,4 +49,8 @@ window.onscroll = showVisible;
*/!*
```

-P.S. The solution also has a variant of `isVisible` that "preloads" images that are within 1 page above/below the current document scroll.