- sticky 버튼을 클릭하면 화면의 최상단 / 최하단으로 스크롤
- 각각의 Icon에 다음의 클릭 이벤트를 넣었다.
- window.scroll을 사용해서 구현했다.
//Layouts.tsx
<StickyIcon>
<UpIcon
onClick={() => {
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
/>
<DownIcon
onClick={() => {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}}
/>
</StickyIcon>
- 컨텐츠 끝까지 스크롤하기 위해서는 scrollHeight 속성을 이용했다. 해당 속성은 요소 콘텐츠의 총 높이를 나타내며, 바깥으로 넘쳐서 보이지 않는 콘텐츠도 포함한다.
window 객체 속성 정리
화면 사이즈
-
window size
- screen : 모니터 사이즈
- window.screen.width , window.screen.height
- outer : 브라우저 사이즈
- window.outerWidth, window. outerHeight
- inner : 브라우저 사이즈 (화면 부분만 + 스크롤바 포함)
- window.innerWidth, window. innerHeight
-
document size
- documentElement : 브라우저 사이즈 (화면 부분만 + 스크롤바 제외)
- document.documentElement.clientWidth, document.documentElement.clientHeight
좌표
- clientX, clienY : (브라우저창 기준) xy 좌표
- pageX, pageY : (웹 문서 기준) xy 좌표
- screenX, screenY : (화면 모니터 기준) xy 좌표
- window.scrollTo() : 해당 좌표로 이동
- window.scrollBy() : 해당 좌표만큼 document 창을 이동
- element.scrollIntoView() : 해당 기능을 호출한 element가 있는 좌표로 이동