-
Notifications
You must be signed in to change notification settings - Fork 845
[내용번역] Part 2. 3.5 Scrolling #739
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
marco0332
wants to merge
2
commits into
javascript-tutorial:master
Choose a base branch
from
marco0332:scrolling
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,12 @@ | ||
# 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() { | ||
|
@@ -15,23 +15,23 @@ window.addEventListener('scroll', function() { | |
``` | ||
|
||
```online | ||
In action: | ||
작동 중: | ||
|
||
Current scroll = <b id="showScroll">scroll the window</b> | ||
현재 스크롤 위치 = <b id="showScroll">scroll the window</b> | ||
``` | ||
|
||
The `scroll` event works both on the `window` and on scrollable elements. | ||
`scroll` 이벤트는 `window`와 스크롤 가능한 요소에서 동작합니다. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
## 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` 리스너에서 `event.preventDefault()`로 스크롤을 막는 것은 onscroll 리스너가 스크롤이 이미 발생한 뒤에 동작하기 때문에 불가능합니다. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
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 the applications on `onscroll`. | ||
다음은 `onscroll`이 적용된 애플리케이션을 이해하기 위해 해결하거나 살펴볼 수 있는 몇 가지 과제입니다. |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
경어체를 유지해주세요.
명사형으로 끝나는 문장은 경어체가 아니어도 됩니다.
~숨김
,~불러옴