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
index 10945ccd78..c188cdb6e0 100644
--- 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,64 +1,67 @@
-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.
+즉각적으로 호출할 수 있고 `window.onscroll` 핸들러로서 추가할 수 있습니다.
-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 `` tag, that is `document.documentElement`.
+이 문서는 `` 태그 즉 `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.
+우리는 전체 문서의 윈도우 기반의 상대 좌표를 `document.documentElement.getBoundingClientRect()`로 얻을 수 있고, `bottom` 프로퍼티 문서 아래로부터의 윈도우 기반 상대 좌표가 될 것입니다.
-For instance, if the height of the whole HTML document is `2000px`, then:
+예를 들어, 전체 HTML 문서의 높이가 `2000px`이라고 한다면:
```js
-// when we're on the top of the page
-// window-relative top = 0
-document.documentElement.getBoundingClientRect().top = 0
+// 페이지의 상단에 도달하게 되면
+// 윈도우 기준 상단 = 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
+// 윈도우 기준 하단 = 2000
+// 문서가 길면, 아마도 윈도우 아래보다도 멀리 나가게 됩니다
+document.documentElement.getBoundingClientRect().bottom = 2000;
```
-If we scroll `500px` below, then:
+만약에 `500px` 스크롤 하게 된다면:
```js
-// document top is above the window 500px
-document.documentElement.getBoundingClientRect().top = -500
-// document bottom is 500px closer
-document.documentElement.getBoundingClientRect().bottom = 1500
+// 문서 상단이 윈도우보다 500px 더 위에 있습니다
+document.documentElement.getBoundingClientRect().top = -500;
+// 문서 하단이 윈도우보다 1500px 더 가깝습니다
+document.documentElement.getBoundingClientRect().bottom = 1500;
```
-When we scroll till the end, assuming that the window height is `600px`:
-
+맨 아래까지 스크롤 하게 된다면, 윈도우의 높이가 `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
+// 문서 상단이 윈도우보다 1400px 위에 있습니다
+document.documentElement.getBoundingClientRect().top = -1400;
+// 문서 하단이 윈도우보다 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.
+`bottom`은 `0`이 될 수 없음을 명심합시다, 왜냐하면 윈도우의 상단에 절대로 도달할 수 없습니다. `bottom` 좌표의 최소한의 한계는 윈도우의 높이입니다(`600`으로 예상합니다), 조금이라도 더 스크롤 할 수 없습니다.
-We can obtain the window height as `document.documentElement.clientHeight`.
+윈도우의 높이는 `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`).
+과제를 위해, 문서 하단이 `100px`보다 더 떨어져 있지 않음을 알고 있어야 합니다. (즉: `600-700px`, 만일 높이가 `600`이라면)
-So here's the function:
+그래서 이것이 구현부입니다:
```js
function populate() {
- while(true) {
- // document bottom
- let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
+ while (true) {
+ // 문서의 아랫 부분
+ let windowRelativeBottom = document.documentElement.getBoundingClientRect()
+ .bottom;
- // if the user scrolled far enough (<100px to the end)
+ // 만약 사용자가 충분히 멀리 스크롤 했다면 (끝까지 100px 미만)
if (windowRelativeBottom < document.documentElement.clientHeight + 100) {
- // let's add more data
- document.body.insertAdjacentHTML("beforeend", `Date: ${new Date()}
`);
+ // 더 많은 정보를 추가합시다
+ document.body.insertAdjacentHTML(
+ "beforeend",
+ `Date: ${new Date()}
`
+ );
}
}
}
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
index 7c8d14fca6..30f23e85c8 100644
--- 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
@@ -1,20 +1,20 @@
-importance: 5
+중요도: 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:
+스크롤의 2가지 중요한 개념이 있음을 기억해봅시다:
-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.
+1. **스크롤은 탄력적입니다.".** 브라우저나 디바이스 상에서 문서의 시작이나 마지막 부분보다 더 스크롤할 수 있습니다. (아래에 공백 공간이 보이고, 그러고 나서 문서는 자동으로 원래 위치로 "튀어서 되돌아오게(bounce back)" 됩니다).
+2. **스크롤은 부정확합니다.** 페이지의 마지막 부분으로 스크롤 할 때, 사실 원본 문서의 맨 아래로부터 0-50 px 정도 떨어질 수도 있습니다.
-So, "scrolling to the end" should mean that the visitor is no more than 100px away from the document end.
+그래서 "아래로 스크롤 하는 것"은 방문자가 문서의 아래로부터 100 px 이상 떨어져 있지 않음을 의미합니다.
-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/article.md b/2-ui/3-event-details/8-onscroll/article.md
index 7b5cf48484..12e3c4b0e6 100644
--- a/2-ui/3-event-details/8-onscroll/article.md
+++ b/2-ui/3-event-details/8-onscroll/article.md
@@ -1,16 +1,17 @@
-# Scrolling
+# 스크롤 하기
-The `scroll` event allows to react on a page or element scrolling. There are quite a few good things we can do here.
+`scroll` 이벤트는 페이지나 엘리먼트 상의 스크롤에 반응할 수 있도록 합니다. 여기서 해볼 수 있는 꽤 좋은 것들이 많이 있습니다.
-For instance:
-- Show/hide additional controls or information depending on where in the document the user is.
-- Load more data when the user scrolls down till the end of the page.
+예를 들어:
-Here's a small function to show the current scroll:
+- 사용자가 문서에 어디 있는지에 따라서 추가적인 컨트롤이나 정보를 보여주거나/가릴 수 있습니다.
+- 사용자가 문서의 아래까지 스크롤을 내릴 때 많은 정보를 불러올 수 있습니다.
+
+이것이 현재의 스크롤을 보여주는 간단한 함수입니다:
```js autorun
-window.addEventListener('scroll', function() {
- document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px';
+window.addEventListener("scroll", function () {
+ document.getElementById("showScroll").innerHTML = window.pageYOffset + "px";
});
```
@@ -20,13 +21,13 @@ In action:
Current scroll = scroll the window
```
-The `scroll` event works both on the `window` and on scrollable elements.
+`scroll` 이벤트는 `window`와 스크롤 할 수 있는 구성요소 모두에서 작동합니다.
## 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.
+We can't prevent scrolling by using `event.preventDefault()` in `onscroll` listener, because it triggers _after_ the scroll has already happened.
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`.