스크롤 속성 정리 페이지 개인적인 사이드 프로젝트를 준비중인데, 스크롤을 이용한 이벤트들을 구현 예정이다. 그 중의 한가지는 스크롤을 내림에 따라 원형이 나타나며 점점 화면을 가득 채우는 사이즈로 커지고, 다음 컨텐츠가 그 화면을 배경으로 자연스럽게 나타나는 효과이다. (넘 멋진 애플의 아이폰 se 페이지!) window 객체의 스크롤 이벤트를 사용하면 되겠다 하고 어렴풋이 생각했지만 구체적인 방법을 더 알아보았다. 구현 방법 기본적으로, 변화시킬 요소의 스타일 값을 useState를 이용해 상태로 저장하고, 위의 속성들을 이용해 현재까지의 스크롤 상태를 구한 후, if절을 통해 변화시키고 싶

개인적인 사이드 프로젝트를 준비중인데, 스크롤을 이용한 이벤트들을 구현 예정이다. window 객체의 스크롤 이벤트를 사용하면 되겠다 하고 어렴풋이 생각했지만 구체적인 방법을 더 알아보다가 알게 된, 혹은 다시 한번 보게 된 스크롤 애니메이션 구현시 (혹은 화면에서의 특정 값을 계산할 때) 필요한 속성 몇개를 정리해본다. window.pageXOffset/ window.pageYOffset 현재 스크롤 위치-> (세로(or 가로) 스크롤에 의해 가려진 위쪽 영역 높이(or 넓이)) document.documentElement의 scrollLeft나 scrollTop 사용 가능, but 구버전 WebKit을 기반으로 하는 브라우저에선 버그(5991) 때문에 document.do