Skip to content

Conversation

hanggong1
Copy link
Contributor

μš”μ•½

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

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

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

Choose a reason for hiding this comment

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

Suggested change
λ‹€μŒμ€ ν˜„μž¬ μŠ€ν¬λ‘€μ„ ν‘œμ‹œν•˜λŠ” μž‘μ€ ν•¨μˆ˜μž…λ‹ˆλ‹€.
λ‹€μŒ ν•¨μˆ˜λŠ” ν˜„μž¬ 슀크둀 μœ„μΉ˜λ₯Ό ν‘œμ‹œν•΄μ€λ‹ˆλ‹€.

@@ -15,23 +15,23 @@ window.addEventListener('scroll', function() {
```

```online
In action:
λ™μž‘ 쀑:
Copy link
Member

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

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

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()`λ₯Ό μ‚¬μš©ν•΄λ„ μŠ€ν¬λ‘€μ„ 막을 수 μ—†μŠ΅λ‹ˆλ‹€.


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

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()`둜 막을 수 μžˆμŠ΅λ‹ˆλ‹€.


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

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()`λ₯Ό μΆ”κ°€ν•˜λ©΄ μŠ€ν¬λ‘€μ„ 움직이지 λͺ»ν•˜κ²Œ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.


There are many ways to initiate a scroll, so it's more reliable to use CSS, `overflow` property.
μŠ€ν¬λ‘€μ„ μ‹œμž‘ν•˜λŠ” 방법은 μ—¬λŸ¬ κ°€μ§€κ°€ μžˆμœΌλ―€λ‘œ CSS, `overflow` ν”„λ‘œνΌν‹°λ₯Ό μ‚¬μš©ν•˜λŠ” 것이 더 μ•ˆμ •μ μž…λ‹ˆλ‹€.
Copy link
Member

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` ν”„λ‘œνΌν‹°λ₯Ό μ‚¬μš©ν•˜λŠ” κ±Έ μΆ”μ²œν•©λ‹ˆλ‹€.


Here are few tasks that you can solve or look through to see applications of `onscroll`.
λ‹€μŒμ€ `onscroll`의 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ 보기 μœ„ν•΄ ν•΄κ²°ν•˜κ±°λ‚˜ μ‚΄νŽ΄λ³Ό 수 μžˆλŠ” λͺ‡ κ°€μ§€ κ³Όμ œμž…λ‹ˆλ‹€.
Copy link
Member

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` μ΄λ²€νŠΈκ°€ μ‹€λ¬΄μ—μ„œ μ–΄λ–»κ²Œ μ‚¬μš©λ˜λŠ”μ§€λŠ” λ‹€μŒ 과제λ₯Ό 톡해 ν•™μŠ΅ν•΄λ³΄μ„Έμš”.

@javascript-translate-bot

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants