-
Notifications
You must be signed in to change notification settings - Fork 845
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
base: master
Are you sure you want to change the base?
Conversation
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.
λ²μκΈ°λ₯Ό λλ¦°κ²κ°μ΄ μ μ΄ν΄λμ§ μλ λ¬Έμ₯μ΄ μμ΄μ
μ΄ λΆλΆμ κ°μ μμ²λ립λλ€.
μ κ° λ§μΆ€λ² κ²μ¬κΈ°λ λλ¦¬μ§ μκ³ λ²μνμ¬μ
λ§μ§λ§μ λ§μΆ€λ²κ²μ¬κΈ° νλ² λ리μκ³ μ»€λ° μμ± λΆνλ릴κ²μ.
μμ ν, 컀λ°μ νλλ‘ ν©μ³μ£ΌμκΈΈ λΆνλ립λλ€.
- 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. | ||
μμ: | ||
- λ¬Έμμ μμΉμ λ°λΌ μΆκ° 컨νΈλ‘€ λλ μ 보λ₯Ό νμνκ±°λ μ¨κΉλλ€. |
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.
- λ¬Έμμ μμΉμ λ°λΌ μΆκ° 컨νΈλ‘€ λλ μ 보λ₯Ό νμνκ±°λ μ¨κΉλλ€. | |
- μ¬μ©μ¬μ λ¬Έμ λ΄ μμΉμ λ°λΌ νΉμ μ½λλ₯Ό μ€νμν€κ±°λ μ 보λ₯Ό νμ νΉμ μ¨κΈΈ μ μμ΅λλ€. |
- Load more data when the user scrolls down till the end of the page. | ||
μμ: | ||
- λ¬Έμμ μμΉμ λ°λΌ μΆκ° 컨νΈλ‘€ λλ μ 보λ₯Ό νμνκ±°λ μ¨κΉλλ€. | ||
- μ¬μ©μκ° νμ΄μ§ λκΉμ§ μ€ν¬λ‘€ ν λ λ λ§μ λ°μ΄ν°λ₯Ό λ‘λν©λλ€. |
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.
- μ¬μ©μκ° νμ΄μ§ λκΉμ§ μ€ν¬λ‘€ ν λ λ λ§μ λ°μ΄ν°λ₯Ό λ‘λν©λλ€. | |
- μ¬μ©μκ° νμ΄μ§ 맨 μλκΉμ§ μ€ν¬λ‘€μ λ΄λ¦΄ κ²½μ°, μΆκ° λ°μ΄ν°λ₯Ό λ‘λν©λλ€. |
|
||
Here's a small function to show the current scroll: | ||
λ€μμ νμ¬ μ€ν¬λ‘€μ νμνλ μμ ν¨μμ λλ€. |
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.
λ€μμ νμ¬ μ€ν¬λ‘€μ νμνλ μμ ν¨μμ λλ€. | |
λ€μ ν¨μλ νμ¬ μ€ν¬λ‘€ μμΉλ₯Ό νμν΄μ€λλ€. |
@@ -15,23 +15,23 @@ window.addEventListener('scroll', function() { | |||
``` | |||
|
|||
```online | |||
In action: | |||
λμ μ€: |
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.
λμ μ€: | |
μ ν¨μκ° λμνλλ‘ ν΄ λμκΈ° λλ¬Έμ λ€μκ³Ό κ°μ΄ νμ¬ μ€ν¬λ‘€ μμΉκ° κ³μ μ λ°μ΄νΈλλκ²μ νμΈν μ μμ΅λλ€. |
``` | ||
|
||
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 comment
The reason will be displayed to describe this comment to others. Learn more.
`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()`λ₯Ό μ¬μ©νμ¬ μ€ν¬λ‘€μ λ°©μ§ν μ μμ΅λλ€. |
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.
μ€ν¬λ‘€μ΄ μ΄λ―Έ μ€νλ *ν*μ νΈλ¦¬κ±° λλ―λ‘ `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()`λ‘ μ€ν¬λ‘€ νμ§ μλλ‘ ν μ μμ΅λλ€. |
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.
κ·Έλ¬λ μ€ν¬λ‘€μ μ λ°νλ μ΄λ²€νΈ(μμ: `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()`μ μΆκ°νλ©΄ μ€ν¬λ‘€μ΄ μμλμ§ μμ΅λλ€. |
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.
μ΄λ²€νΈ νΈλ€λ¬λ₯Ό μ΄λ¬ν μ΄λ²€νΈμ μ΄λ²€νΈ νΈλ€λ¬μ `event.preventDefault()`μ μΆκ°νλ©΄ μ€ν¬λ‘€μ΄ μμλμ§ μμ΅λλ€. | |
μ΄λ²€νΈ νΈλ€λ¬λ₯Ό μ΄λ¬ν μ΄λ²€νΈμ μ΄λ²€νΈ νΈλ€λ¬μ `event.preventDefault()`μ μΆκ°νλ©΄ μ€ν¬λ‘€μ΄ μμλμ§ μμ΅λλ€. |
μ΄λ²€νΈ νΈλ€λ¬λ₯Ό μ΄λ¬ν μ΄λ²€νΈμ μ΄λ²€νΈ νΈλ€λ¬μ `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` νλ‘νΌν°λ₯Ό μ¬μ©νλ κ²μ΄ λ μμ μ μ λλ€. |
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.
μ€ν¬λ‘€μ μμνλ λ°©λ²μ μ¬λ¬ κ°μ§κ° μμΌλ―λ‘ CSS, `overflow` νλ‘νΌν°λ₯Ό μ¬μ©νλ κ²μ΄ λ μμ μ μ λλ€. | |
μ€ν¬λ‘€μ μμ§μ΄κ² νλ λ°©λ²μ μ¬λ¬ κ°μ§κ° μμΌλ―λ‘ μ€ν¬λ‘€μ λ§μΌλ €λ©΄ CSSμ `overflow` νλ‘νΌν°λ₯Ό μ¬μ©νλ κ±Έ μΆμ²ν©λλ€. |
|
||
Here are few tasks that you can solve or look through to see applications of `onscroll`. | ||
λ€μμ `onscroll`μ μ ν리μΌμ΄μ μ 보기 μν΄ ν΄κ²°νκ±°λ μ΄ν΄λ³Ό μ μλ λͺ κ°μ§ κ³Όμ μ λλ€. |
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.
λ€μμ `onscroll`μ μ ν리μΌμ΄μ μ 보기 μν΄ ν΄κ²°νκ±°λ μ΄ν΄λ³Ό μ μλ λͺ κ°μ§ κ³Όμ μ λλ€. | |
`scroll`κ³Ό `onscroll` μ΄λ²€νΈκ° μ€λ¬΄μμ μ΄λ»κ² μ¬μ©λλμ§λ λ€μ κ³Όμ λ₯Ό ν΅ν΄ νμ΅ν΄λ³΄μΈμ. |
Please make the requested changes. After it, add a comment "/done". |
μμ½
μ°κ΄ μ΄μ
Scrolling λ²μ#1552
Pull Request 체ν¬λ¦¬μ€νΈ
TODO