Oct 5, 2020 · Oct 5, 2020 · Oct 5, 2020 · Oct 5, 2020 · Oct 5, 2020
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
 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`<html>`tag, that is`document.documentElement`.
 이 문서는`<html>`태그 즉`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 wholeHTMLdocument 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 (<100pxto the end)
    //만약 사용자가 충분히 멀리 스크롤 했다면 (끝까지100px미만)
    if (windowRelativeBottom < document.documentElement.clientHeight + 100) {
      // let's add more data
      document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
      // 더 많은 정보를 추가합시다
      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
 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 "bouncesback" 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. **스크롤은 탄력적입니다.".**브라우저나 디바이스 상에서 문서의 시작이나 마지막 부분보다 더 스크롤할 수 있습니다. (아래에 공백 공간이 보이고, 그러고 나서 문서는 자동으로 원래 위치로 "튀어서 되돌아오게(bounceback)" 됩니다).
 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
 #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";
 });
 ```

 Current scroll = <b id="showScroll">scroll the window</b>
 ```

 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`.
Original file line number	Diff line number	Diff line change
		@@ -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`<html>`tag, that is`document.documentElement`.
		이 문서는`<html>`태그 즉`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 wholeHTMLdocument 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 (<100pxto the end)
		//만약 사용자가 충분히 멀리 스크롤 했다면 (끝까지100px미만)
		if (windowRelativeBottom < document.documentElement.clientHeight + 100) {
		// let's add more data
		document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
		// 더 많은 정보를 추가합시다
		document.body.insertAdjacentHTML(
		"beforeend",
		`<p>Date: ${new Date()}</p>`
		);
		}
		}
		}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 "bouncesback" 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. 스크롤은 탄력적입니다.".브라우저나 디바이스 상에서 문서의 시작이나 마지막 부분보다 더 스크롤할 수 있습니다. (아래에 공백 공간이 보이고, 그러고 나서 문서는 자동으로 원래 위치로 "튀어서 되돌아오게(bounceback)" 됩니다).
		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".
		추가 실생활에서는 더 많은 메시지나 상품을 보여주기를 원할 수 있습니다.
Original file line number	Diff line number	Diff line change
		@@ -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";
		});
		```

Expand All		@@ -20,13 +21,13 @@ In action:
		Current scroll = <b id="showScroll">scroll the window</b>
		```

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

Expand Down