ScrollIntoView 함수로 탭 메뉴 스크롤 기능 구현하기

 

 

ScrollIntoView 메서드는 웹 페이지의 특정 요소로 스크롤할 수 있는 JavaScript의 내장 함수입니다. 이 기능을 사용하면 한 번의 클릭이나 탭만으로 특정 구역으로 쉽게 이동할 수 있습니다.

 

 

이번 포스트에서는 JavaScript와 React를 활용해서 Scroll 기능을 구현하는 방법을 소개하려고 합니다.

탭 메뉴를 클릭하면 해당 섹션으로 넘어가도록 만들어보겠습니다.

리액트가 없어도 ScrollIntoView 메서드는 사용할 수 있지만 예시로 든 코드에는 리액트가 활용된 점 참고해주세요.

 

 

Step 1: 기본 틀 잡기

먼저 전체적인 틀을 잡아보겠습니다. 섹션 아이디를 미리 배열에 넣어두고, 이것을 헤더에 프라퍼티로 전달해서 스크롤 기능에 활용하도록 할거에요. 아직 작성하지는 않았지만 스크롤을 담당하는 handleClickScroll 메서드 역시 보내줍니다.Section의 num 프라퍼티는 단순히 섹션 마다 화면에 번호를 띄우기 위해 넣었습니다.

 

App.js 파일

function App() {
  const sectionIds = ['section_1','section_2', 'section_3']
  return (
    <div className="App">
      <Header sectionList={sectionIds} moveTo={handleClickScroll} />
      <Section num={1}/>
      <Section num={2}/>
      <Section num={3}/>
    </div>
  );
}

export default App;

 

 

Step 2: handleClickScroll 메서드 작성하기

섹션의 id 값을 인자로 받아 getElementById에 넣어서 해당 섹션의 Element 객체를 받습니다.

해당 객체의 내장 함수인 scrollIntoView 메서드를 호출해서 객체가 위치한 곳으로 화면을 스크롤링합니다.

이때 옵션 값을 넣어 스크롤 방식을 제어할 수 있는데, 여기서 behavior: 'smooth'는 부드럽게 스크롤하게 만드는 옵션입니다.

 

간혹 윈도우에서 최적화를 위해 애니메이션 기능을 꺼놓은 경우, 스크롤링 없이 단번에 이동하게 되는데, 애니메이션 기능을 켜고 싶은 분들은 다음 글을 참고해서 설정을 바꿔보시기 바랍니다. 창의 제어 및 요소에 애니메이션 효과 주기를 활성화하시면 됩니다.

 

 

App.js 파일

const handleClickScroll = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

 

 

Step 3: 컴포넌트 생성하기

저는 리액트를 썼기 때문에 컴포넌트 단위로 나누어 구현했지만, 리액트를 쓰지 않으시다면, 아래로 내리셔서 메서드만 확인하셔도 JS로 활용 가능합니다.

• 탭 메뉴를 품는 Header 섹션 만들기
• 각 탭과 대응하는 Section 컴포넌트 만들기

 

 

Header.js 파일

const Header = (props) => {
  return (
    <header>
      <nav>
        <ul>
          <li onClick={() => props.moveTo(props.sectionList[0])}>section 1</li>
          <li onClick={() => props.moveTo(props.sectionList[1])}>section 2</li>
          <li onClick={() => props.moveTo(props.sectionList[2])}>section 3</li>
        </ul>
      </nav>
    </header>
  );
};

첫번째 스텝에서 프라퍼티로 넣었던 함수를 각 리스트의 onClick 프라퍼티로 설정합니다.

각 섹션의 아이디 값이 저장되어 있는 sectionList를 인자로 넣어줍니다.  

 

 

const Section = (props) => {
  return (
    <div id={`section_${props.num}`}>
    section {props.num}
  </div>
  )
  
}

export default Section;

섹션 컴포넌트에는 프라퍼티로 받은 num을 활용해서 id를 설정해줍니다. `section_${props.num}`에서 ${prop.num}이 prop.num에 해당하는 숫자로 변경되어 우리가 처음 리스트에 넣어두었던 id와 일치하게 됩니다.

 

 

References

https://www.geeksforgeeks.org/html-dom-scrollintoview-method/?ref=gcse
https://ko.reactjs.org/docs/components-and-props.html