목록2024/08 (1)
Coding Planet
[Next.js]스크롤 컨테이너에 대한 'ScrollToTop' 컴포넌트 구현하기 - 맨 위로 버튼
일반적으로 ScrollToTop 컴포넌트는 window 객체의 스크롤을 감지하여 구현한다. 하지만 특정 div 내에서만 스크롤이 발생하는 경우 window.pageYOffset은 항상 0을 반환하여 스크롤 위치를 정확히 파악할 수 없다. 무한 스크롤 게시판의 경우 맨 위로 가기 버튼이 필수적이므로 이 기능을 스크롤 컨테이너에서만 적용되도록 구현했다. 다만 예시코드에서는 무한 스크롤 부분은 코드의 가독성을 위해 제거하고 ScrollToTop 기능만 나와있다. | 접근 방법1. 스크롤 가능한 컨테이너에 ref를 할당한다.2. 이 ref를 'ScrollToTop' 컴포넌트에 전달한다.3. 'ScrollToTop' 컴포넌트 내에서 해당 ref의 scrollTop 속성을 사용하여 스크롤 위치를 감지한다. |..
front
2024. 8. 12. 09:03