[React] scrollTo 스크롤 이동

개요

카테고리(탭) 클릭 시 해당 섹션으로 부드럽게 스크롤 이동 구현 과정

대략적인 레이아웃 구조는 다음과 같다

  return (
    <>
      <MpCategories activeCate="평가하기" activeSec="mp1" />
      <section id="mp1">
        <EvaluationList />
      </section>
      <MpCategories activeCate="신청현황" activeSec="mp2" />
      <section id="mp2">
        <p className="info">마감된 모집글은 보여지지 않습니다</p>
        <ApplicationStatus />
      </section>
      <MpCategories activeCate="모집관리" activeSec="mp3" />
      <section id="mp3">
        <RecruitManagement />
      </section>
      <MpCategories activeCate="정보수정" activeSec="mp4" />
      <section id="mp4">sec4</section>
    </>

• 카테고리 탭-섹션이 한 쌍을 이루어 4번 반복
• 해당 카테고리 탭 ul 태그에 click 이벤트 핸들러 등록 후
  event.target.nodeName !== 'A' 일 경우 early return 하는 형식
• a에는 data-href 형식에 가리키고자 하는 section id(#mp1,...#mp4) 값을 넣어주고 e.target의 dataset.href 값을 얻는 형식

문제 발생

	//중략
   const location = (
      document.querySelector((e.target as HTMLAnchorElement).dataset.href + '') as HTMLElement
    ).offsetTop
   window.scrollTo({top:location})
   ///중략

• 해당 section 의 offsetTop 값을 scrollTo top 값에 입력해도 작동x
• ex) window.scrollTo({top:...,...})
• 혹시나 해당 영역을 감싸고 있는 (카테고리 탭xN , 섹션xN) 부모 element에 적용해보았지만 역시나 먹히지 않았다

해결

scroll bar 가 발생하는 가장 부모 element에 적용

스크롤 바가 정확히 어떤 element에서 생기는 지 확인한 결과
나 같은 경우는 좌측 고정 aside와 우측 main (scrollable) 구조로 레이아웃이 잡혀있어
main 태그의 css 속성 중 overflow-y:auto으로 인해 스크롤 바가 생기는 형식이었다

 const LinkOnClickHandler = (e: React.MouseEvent<HTMLUListElement>) => {
    if ((e.target as HTMLAnchorElement).nodeName !== 'A') return
    const location = (
      document.querySelector((e.target as HTMLAnchorElement).dataset.href + '') as HTMLElement
    ).offsetTop
    const $main = document.querySelector('main')
    if (!$main) return
    $main.scrollTo({
      top: location - window.innerHeight / 3,
      behavior: 'smooth',
    })
  }

---

(마우스 커서는 안보이지만 탭 클릭 중..)

main으로 적용하니 부드럽게 잘 움직인다!