React 특정 dom으로 스크롤 이동

KJH·2022년 6월 12일
1
  • 이동하고 싶은 dom 에다 ref 선언
  • scrollIntoView 속성 이용
  • {behavior: 'smooth'} 옵션을 주면 부드럽게 스크롤이 이동
// funtion
function TestComponent() {
  const myRef = React.useRef(null);
  const scrollToElement = () => myRef.current.scrollIntoView({ behavior: 'smooth' });
  
  return (
    <>
      <div ref={myRef}>Element you want to view</div>
      <button onClick={scrollToElement}>Trigger the scroll</button>
    </>
  );
}
// class
class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  
  scrollToElement = () => {
    myRef.current.scrollIntoView({ behavior: 'smooth' });
  };
  
  return (
  	<>
	  <div ref={myRef}>Element you want to view</div>
	  <button onClick={this.scrollToElement}>Trigger the scroll</button>
	</>
  )
}
profile
항상 공부하는 N년차 개발자입니다.

0개의 댓글