From a0b066c2ab30aa444eff50f63240470e45880592 Mon Sep 17 00:00:00 2001 From: skim Date: Tue, 6 Oct 2020 02:45:55 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EB=B2=88?= =?UTF-8?q?=EC=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../8-onscroll/1-endless-page/solution.md | 71 ++++++++++--------- .../8-onscroll/1-endless-page/task.md | 18 ++--- 2 files changed, 46 insertions(+), 43 deletions(-) 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..46d3e72f27 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..07f11957a3 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-50px 정도 떨어질 수도 있습니다. -So, "scrolling to the end" should mean that the visitor is no more than 100px away from the document end. +그래서 "아래로 스크롤하는 것"은 방문자가 문서의 아래로부터 100px 이상 떨어져 있지 않음을 의미합니다. -P.S. In real life we may want to show "more messages" or "more goods". +추가 실생활에서는 더 많은 메시지나 상품을 보여주기를 원할 수 있습니다. From 66f3965aaa9e9c1e464ac47c4a82841801e13109 Mon Sep 17 00:00:00 2001 From: skim Date: Tue, 6 Oct 2020 02:54:37 +0900 Subject: [PATCH 2/5] revert --- .../8-onscroll/1-endless-page/solution.md | 58 +++++++++---------- 1 file changed, 28 insertions(+), 30 deletions(-) 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 46d3e72f27..f1f97692ed 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,68 +1,66 @@ -해결방법의 핵심은 페이지의 마지막 부분에 도달하기까지 페이지까지 더 많은 날짜(혹은 실제로 더 많은 상품을 불러오기)를 추가하는 함수입니다. +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. -즉각적으로 호출할 수 있고 `window.onscroll` 핸들러로서 추가할 수 있습니다. +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. -이 문서는 `` 태그 즉 `document.documentElement` 내부에 표시(포함)되었습니다. +The document is represented (and contained) within `` tag, that is `document.documentElement`. -우리는 전체 문서의 윈도우 기반의 상대 좌표를 `document.documentElement.getBoundingClientRect()`로 얻을 수 있고, `bottom` 프로퍼티 문서 아래로부터의 윈도우 기반 상대 좌표가 될 것입니다. +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. -예를 들어, 전체 HTML 문서의 높이가 `2000px`이라고 한다면: +For instance, if the height of the whole HTML document is `2000px`, then: ```js -// 페이지의 상단에 도달하게 되면 -// 윈도우 기준 상단 = 0 +// when we're on the top of the page +// window-relative top = 0 document.documentElement.getBoundingClientRect().top = 0; -// 윈도우 기준 하단 = 2000 -// 문서가 길면, 아마도 윈도우 아래보다도 멀리 나가게 됩니다 +// window-relative bottom = 2000 +// the document is long, so that is probably far beyond the window bottom document.documentElement.getBoundingClientRect().bottom = 2000; ``` -만약에 `500px` 스크롤하게 된다면: +If we scroll `500px` below, then: ```js -// 문서 상단이 윈도우보다 500px 더 위에 있습니다 +// document top is above the window 500px document.documentElement.getBoundingClientRect().top = -500; -// 문서 하단이 윈도우보다 1500px 더 가깝습니다 +// document bottom is 500px closer document.documentElement.getBoundingClientRect().bottom = 1500; ``` -맨 아래까지 스크롤하게 된다면, 윈도우의 높이가 `600px`로 추정하게 됩니다: +When we scroll till the end, assuming that the window height is `600px`: ```js -// 문서 상단이 윈도우보다 1400px 위에 있습니다 +// document top is above the window 1400px document.documentElement.getBoundingClientRect().top = -1400; -// 문서 하단이 윈도우보다 600px 아래에 있습니다 +// document bottom is below the window 600px document.documentElement.getBoundingClientRect().bottom = 600; ``` -`bottom`은 `0`이 될 수 없음을 명심합시다, 왜냐하면 윈도우의 상단에 절대로 도달할 수 없습니다. `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. -윈도우의 높이는 `document.documentElement.clientHeight`로 얻을 수 있습니다. +We can obtain the window height as `document.documentElement.clientHeight`. -과제를 위해, 문서 하단이 `100px`보다 더 떨어져 있지 않음을 알고 있어야 합니다. (즉: `600-700px`, 만일 높이가 `600`이라면) +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; - // 만약 사용자가 충분히 멀리 스크롤했다면 (끝까지 100px 미만) - if (windowRelativeBottom < document.documentElement.clientHeight + 100) { - // 더 많은 정보를 추가합시다 - document.body.insertAdjacentHTML( - "beforeend", - `

Date: ${new Date()}

` - ); - } + // if the user hasn't scrolled far enough (>100px to the end) + if (windowRelativeBottom > document.documentElement.clientHeight + 100) + break; + + // let's add more data + document.body.insertAdjacentHTML("beforeend", `

Date: ${new Date()}

`); } } ``` From 45bbc7698a619f3747e6fe89b729b91332c917af Mon Sep 17 00:00:00 2001 From: skim Date: Tue, 6 Oct 2020 02:58:56 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=EB=A7=9E=EC=B6=A4=EB=B2=95=20=EA=B2=80?= =?UTF-8?q?=EC=82=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2-ui/3-event-details/8-onscroll/1-endless-page/task.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 07f11957a3..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 @@ -4,7 +4,7 @@ # 끝없는 페이지 -끝없는 페이지를 만들어 봅시다. 방문자가 맨 아래로 스크롤을 내리면, 자동으로 현재의 날짜와 시간 정보가 추가됩니다(방문자가 더 많이 스크롤할 수 있게 됩니다). +끝없는 페이지를 만들어 봅시다. 방문자가 맨 아래로 스크롤을 내리면, 자동으로 현재의 날짜와 시간 정보가 추가됩니다(방문자가 더 많이 스크롤 할 수 있게 됩니다). 이와 같이: @@ -12,9 +12,9 @@ 스크롤의 2가지 중요한 개념이 있음을 기억해봅시다: -1. **스크롤은 탄력적입니다.".** 브라우저나 디바이스 상에서 문서의 시작이나 마지막 부분보다 더 스크롤할 수 있습니다. (아래에 공백 공간이 보여지고, 그러고나서 문서는 자동적으로 원래 위치로 "튀어서 되돌아오게(bounce back)" 됩니다.). -2. **스크롤은 부정확합니다.** 페이지의 마지막부분으로 스크롤할때, 사실 원본 문서의 맨 아래로부터 0-50px 정도 떨어질 수도 있습니다. +1. **스크롤은 탄력적입니다.".** 브라우저나 디바이스 상에서 문서의 시작이나 마지막 부분보다 더 스크롤할 수 있습니다. (아래에 공백 공간이 보이고, 그러고 나서 문서는 자동으로 원래 위치로 "튀어서 되돌아오게(bounce back)" 됩니다). +2. **스크롤은 부정확합니다.** 페이지의 마지막 부분으로 스크롤 할 때, 사실 원본 문서의 맨 아래로부터 0-50 px 정도 떨어질 수도 있습니다. -그래서 "아래로 스크롤하는 것"은 방문자가 문서의 아래로부터 100px 이상 떨어져 있지 않음을 의미합니다. +그래서 "아래로 스크롤 하는 것"은 방문자가 문서의 아래로부터 100 px 이상 떨어져 있지 않음을 의미합니다. 추가 실생활에서는 더 많은 메시지나 상품을 보여주기를 원할 수 있습니다. From e88ca3cee3ecdcbf6bc4565d47b6323fc10d017e Mon Sep 17 00:00:00 2001 From: skim Date: Tue, 6 Oct 2020 03:03:12 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=EC=86=94=EB=A3=A8=EC=85=98=20=EB=A7=9E?= =?UTF-8?q?=EC=B6=A4=EB=B2=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../8-onscroll/1-endless-page/solution.md | 58 ++++++++++--------- 1 file changed, 30 insertions(+), 28 deletions(-) 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 f1f97692ed..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,66 +1,68 @@ -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 +// 페이지의 상단에 도달하게 되면 +// 윈도우 기준 상단 = 0 document.documentElement.getBoundingClientRect().top = 0; -// window-relative bottom = 2000 -// the document is long, so that is probably far beyond the window bottom +// 윈도우 기준 하단 = 2000 +// 문서가 길면, 아마도 윈도우 아래보다도 멀리 나가게 됩니다 document.documentElement.getBoundingClientRect().bottom = 2000; ``` -If we scroll `500px` below, then: +만약에 `500px` 스크롤 하게 된다면: ```js -// document top is above the window 500px +// 문서 상단이 윈도우보다 500px 더 위에 있습니다 document.documentElement.getBoundingClientRect().top = -500; -// document bottom is 500px closer +// 문서 하단이 윈도우보다 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 +// 문서 상단이 윈도우보다 1400px 위에 있습니다 document.documentElement.getBoundingClientRect().top = -1400; -// document bottom is below the window 600px +// 문서 하단이 윈도우보다 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; - // if the user hasn't scrolled far enough (>100px to the end) - if (windowRelativeBottom > document.documentElement.clientHeight + 100) - break; - - // let's add more data - document.body.insertAdjacentHTML("beforeend", `

Date: ${new Date()}

`); + // 만약 사용자가 충분히 멀리 스크롤 했다면 (끝까지 100px 미만) + if (windowRelativeBottom < document.documentElement.clientHeight + 100) { + // 더 많은 정보를 추가합시다 + document.body.insertAdjacentHTML( + "beforeend", + `

Date: ${new Date()}

` + ); + } } } ``` From ff9748ee98a39233da76e83b0bb20c7c097391d9 Mon Sep 17 00:00:00 2001 From: skim Date: Tue, 6 Oct 2020 03:31:09 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[=EC=8B=A0=EA=B7=9C=EB=B2=88=EC=97=AD]=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2-ui/3-event-details/8-onscroll/article.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) 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`.