Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Part2 3.6 Scrolling 번역 #1554

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
hanggong1 wants to merge 1 commit into javascript-tutorial:master
base: master
Choose a base branch
Loading
from hanggong1:js1553

Conversation

@hanggong1
Copy link
Contributor

@hanggong1 hanggong1 commented Sep 8, 2022

요약

image

연관 이슈

Scrolling 번역#1552

Pull Request 체크리스트

TODO

  • 번역 규칙을 확인하셨나요?
    • 줄 바꿈과 단락을 '원문과 동일하게' 유지하셨나요?
    • 맞춤법 검사기로 맞춤법을 확인하셨나요?
    • 마크다운 문법에 사용되는 공백(스페이스), 큰따옴표("), 작은따옴표('), 대시(-), 백틱(`) 등의 특수문자는 그대로 두셨나요?
  • 로컬 서버 세팅 후 최종 결과물을 확인해 보셨나요?
  • PR 하나엔 번역문 하나만 넣으셨나요?
  • 의미 있는 커밋 메시지를 작성하셨나요?
    • 예시
      • [프락시] 번역
      • [프락시] 과제 번역
      • [if문과 조건부 연산자 '?'] 리뷰
      • [주석] 2차 리뷰
      • [Date 객체와 날짜] 번역

Copy link
Member

@Violet-Bora-Lee Violet-Bora-Lee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

번역기를 돌린것같이 잘 이해되지 않는 문장이 있어서
이 부분을 개선 요청드립니다.

제가 맞춤법 검사기는 돌리지 않고 번역하여서
마지막에 맞춤법검사기 한번 돌리시고 커밋 생성 부탁드릴게요.

수정 후, 커밋은 하나로 합쳐주시길 부탁드립니다.

- 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.
예시:
- 문서의 위치에 따라 추가 컨트롤 또는 정보를 표시하거나 숨깁니다.
Copy link
Member

@Violet-Bora-Lee Violet-Bora-Lee Oct 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- 문서의 위치에 따라 추가 컨트롤 또는 정보를 표시하거나 숨깁니다.
- 사용사의 문서 내 위치에 따라 특정 코드를 실행시키거나 정보를 표시 혹은 숨길 수 있습니다.

- Load more data when the user scrolls down till the end of the page.
예시:
- 문서의 위치에 따라 추가 컨트롤 또는 정보를 표시하거나 숨깁니다.
- 사용자가 페이지 끝까지 스크롤 할 때 더 많은 데이터를 로드합니다.
Copy link
Member

@Violet-Bora-Lee Violet-Bora-Lee Oct 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- 사용자가 페이지 끝까지 스크롤 할 때 더 많은 데이터를 로드합니다.
- 사용자가 페이지 맨 아래까지 스크롤을 내릴 경우, 추가 데이터를 로드합니다.

- 사용자가 페이지 끝까지 스크롤 할 때 더 많은 데이터를 로드합니다.

Here's a small function to show the current scroll:
다음은 현재 스크롤을 표시하는 작은 함수입니다.
Copy link
Member

@Violet-Bora-Lee Violet-Bora-Lee Oct 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
다음은 현재 스크롤을 표시하는 작은 함수입니다.
다음 함수는 현재 스크롤 위치를 표시해줍니다.


```online
In action:
동작 중:
Copy link
Member

@Violet-Bora-Lee Violet-Bora-Lee Oct 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
동작 중:
위 함수가 동작하도록 해 놓았기 때문에 다음과 같이 현재 스크롤 위치가 계속 업데이트되는것을 확인할 수 있습니다.

```

The `scroll` event works both on the `window` and on scrollable elements.
`scroll` 이벤트는 `window` 와 스크롤이 가능한 요소 모두에서 작동합니다.
Copy link
Member

@Violet-Bora-Lee Violet-Bora-Lee Oct 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`scroll` 이벤트는 `window`와 스크롤이 가능한 요소 모두에서 작동합니다.
`scroll` 이벤트는 `window`와 스크롤이 가능한 요소 모두에서 동작합니다.

어떻게 통제할 수 없는 것을 만들 수 있을까요?

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()`를 사용하여 스크롤을 방지할 수 없습니다.
Copy link
Member

@Violet-Bora-Lee Violet-Bora-Lee Oct 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
스크롤이 이미 실행된 *후*에 트리거 되므로 `onscroll` Listener에서 `event.preventDefault()`를 사용하여 스크롤을 방지할 수 없습니다.
`onscroll` 리스너는 스크롤이 움직인 *후*에 트리거 되므로 `event.preventDefault()`를 사용해도 스크롤을 막을 수 없습니다.

스크롤이 이미 실행된 *후*에 트리거 되므로 `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()`로 스크롤 하지 않도록 할 수 있습니다.
Copy link
Member

@Violet-Bora-Lee Violet-Bora-Lee Oct 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
그러나 스크롤을 유발하는 이벤트(예시: `key:pageUp` 및 `key:pageDown`에 대한 `keydown` 이벤트)에 대해 `event.preventDefault()`로 스크롤 하지 않도록 할 수 있습니다.
그런데 `key:pageUp`나 `key:pageDown`같은 `keydown` 이벤트를 사용해 스크롤을 움직이는건 `event.preventDefault()`로 막을 수 있습니다.

그러나 스크롤을 유발하는 이벤트(예시: `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()`에 추가하면 스크롤이 시작되지 않습니다.
Copy link
Member

@Violet-Bora-Lee Violet-Bora-Lee Oct 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
이벤트 핸들러를 이러한 이벤트와 이벤트 핸들러의 `event.preventDefault()`에 추가하면 스크롤이 시작되지 않습니다.
이벤트 핸들러를 이러한 이벤트와 이벤트 핸들러의 `event.preventDefault()`에 추가하면 스크롤이 시작되지 않습니다.
Suggested change
이벤트 핸들러를 이러한 이벤트와 이벤트 핸들러의 `event.preventDefault()`에 추가하면 스크롤이 시작되지 않습니다.
`keydown` 이벤트에 핸들러 있고, 이 핸들러에 `event.preventDefault()`를 추가하면 스크롤을 움직이지 못하게 할 수 있습니다.

이벤트 핸들러를 이러한 이벤트와 이벤트 핸들러의 `event.preventDefault()`에 추가하면 스크롤이 시작되지 않습니다.

There are many ways to initiate a scroll, so it's more reliable to use CSS, `overflow` property.
스크롤을 시작하는 방법은 여러 가지가 있으므로 CSS, `overflow` 프로퍼티를 사용하는 것이 더 안정적입니다.
Copy link
Member

@Violet-Bora-Lee Violet-Bora-Lee Oct 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
스크롤을 시작하는 방법은 여러 가지가 있으므로 CSS, `overflow` 프로퍼티를 사용하는 것이 더 안정적입니다.
스크롤을 움직이게 하는 방법은 여러 가지가 있으므로 스크롤을 막으려면 CSS의 `overflow` 프로퍼티를 사용하는 걸 추천합니다.

스크롤을 시작하는 방법은 여러 가지가 있으므로 CSS, `overflow` 프로퍼티를 사용하는 것이 더 안정적입니다.

Here are few tasks that you can solve or look through to see applications of `onscroll`.
다음은 `onscroll`의 애플리케이션을 보기 위해 해결하거나 살펴볼 수 있는 몇 가지 과제입니다.
Copy link
Member

@Violet-Bora-Lee Violet-Bora-Lee Oct 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
다음은 `onscroll`의 애플리케이션을 보기 위해 해결하거나 살펴볼 수 있는 몇 가지 과제입니다.
`scroll`과 `onscroll` 이벤트가 실무에서 어떻게 사용되는지는 다음 과제를 통해 학습해보세요.

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Violet-Bora-Lee Violet-Bora-Lee Violet-Bora-Lee requested changes

Assignees

No one assigned

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /