[Section 08] 스크롤 이벤트

🔮 스크롤 이벤트 다루기

See the Pen 08_02 by sohnsookyoung (@sohnsookyoung) on CodePen.

window객체의 pageYOffset 속성을 사용하여서 현재 스크롤을 얼마나 했는지 픽셀로 나타내준다.

🔮 스크롤 위치에 따라 오브젝트 조작하기

See the Pen 08_03 by sohnsookyoung (@sohnsookyoung) on CodePen.

• ilbuniElem.offsetTop : ilbuniElem 의 위치가 위에서부터 얼마나 떨어져 있는지 알 수 있다.
• ilbuniElem.getBoundingClientRect() : ilbuni가 있는 위치를 가지고 있는 객체로, 스크롤을 내릴 때 어떤 동작을 하도록 하고 싶은 것이므로 위 코드에서는 top 속성을 사용하였다.
• window.innerHeight : 윈도우 화면의 높이를 구할 수 있다.