스크롤 메뉴는 어떻게 개발하나요?

며칠 전에 웹 서비스를 이용하다가 페이지 상단의 네비게이션을 눌렀는데, 브라우저의 스크롤이 변경되며 화면이 이동하는 기능을 봤었습니다. 이러한 기능을 어떻게 만들지 궁금증이 들었는데요.

이번 글에서는 위의 기능을 저는 어떻게 개발했는지 얘기해보겠습니다.

---

먼저 다음의 두가지에 대해 생각해 볼 필요가 있었습니다.

• 화면의 위치를 어떻게 구할 것인가?
• 지정된 위치로 어떻게 스크롤을 할 것인가?

1.화면의 위치를 어떻게 구할 것인가?

페이지가 시작하는 가장 상단 부분에서 현재 보여질 화면이 시작하는 부분까지의 거리를 구해야 했습니다. 글 하단의 참고자료를 통해서 offsetTop을 사용해서 원하는 거리를 구할 수 있는 것을 알게 되었습니다.

Main.tsx

...

function Main() {
	const [sectionHeight, setSectionHeight] = useState<number[]>([]); 
  
  	...
    
    setSectionHieght(
    	sectionRef.map((ref) => {
        	if (ref.current) {
                return ref.current.offsetTop;
            }
            
            return 0;
        })  
    )
  
    ...
    
    return (
    	...
      
      	<section ref={sectionRef[0]}>
  			...
		</section>
      	<section ref={sectionRef[1]}>
  			...
		</section>

      	...
    )
}

...

2.지정된 위치로 어떻게 스크롤을 할 것인가?

scrollTo 메소드를 사용하면 옵션 값으로 들어온 top 값만큼 스크롤을 이동시킬 수 있습니다.

ScrollNav.tsx

...

interface ScrollNavProps {
	sectionHeight: number[]; 
}

function ScrollNav(props: ScrollNavProps) {
  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    
    window.scrollTo({
      top: props.sectionHeight[
      	Number(e.currentTarget.getAttribute('data-index'))  
      ],
      behavior: 'smooth'
    });
  };
  
  return (
  	...
    
    <li>
      <a href="" data-index={0} onClick={handleClick}>
          section1
      </a>
	</li>
    <li>
      <a href="" data-index={1} onClick={handleClick}>
          section2
      </a>
	</li>

    ...
  )
}

...

---

브라우저에서는 다음과 같이 보여집니다.

참고자료

https://ko.javascript.info/size-and-scroll