From cd72e4774119f3911cddb3213d7ebe596f4c88ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A1=B0=EA=B2=BD=ED=9B=88?= <119ttrudgns@daum.net> Date: Thu, 8 Sep 2022 17:45:47 +0900 Subject: [PATCH] =?UTF-8?q?Part2=203.6=20Scrolling=20=EB=B2=88=EC=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2-ui/3-event-details/8-onscroll/article.md | 32 +++++++++++----------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md index 734bd84c61..e22d6b1e0b 100644 --- a/2-ui/3-event-details/8-onscroll/article.md +++ b/2-ui/3-event-details/8-onscroll/article.md @@ -1,12 +1,12 @@ -# Scrolling +# 스크롤 -The `scroll` event allows reacting to 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() { @@ -15,23 +15,23 @@ window.addEventListener('scroll', function() { ``` ```online -In action: +동작 중: -Current scroll = scroll the window +현재 스크롤 = 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. +스크롤이 이미 실행된 *후*에 트리거 되므로 `onscroll` Listener에서 `event.preventDefault()`를 사용하여 스크롤을 방지할 수 없습니다. -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`. +그러나 스크롤을 유발하는 이벤트(예시: `key:pageUp` 및 `key:pageDown`에 대한 `keydown` 이벤트)에 대해 `event.preventDefault()`로 스크롤 하지 않도록 할 수 있습니다. -If we add an event handler to these events and `event.preventDefault()` in it, then the scroll won't start. +이벤트 핸들러를 이러한 이벤트와 이벤트 핸들러의 `event.preventDefault()`에 추가하면 스크롤이 시작되지 않습니다. -There are many ways to initiate a scroll, so it's more reliable to use CSS, `overflow` property. +스크롤을 시작하는 방법은 여러 가지가 있으므로 CSS, `overflow` 프로퍼티를 사용하는 것이 더 안정적입니다. -Here are few tasks that you can solve or look through to see applications of `onscroll`. +다음은 `onscroll`의 애플리케이션을 보기 위해 해결하거나 살펴볼 수 있는 몇 가지 과제입니다. pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy