react scrollIntoView 사용

scrollIntoView는 Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.

이를 사용하면 특정 버튼을 누르면 해당 element까지 도달할 수 있다.

아니면 a href="#id" 를 사용하여 해도 되지만 애니메이션 적용이 안되는 걸로 알고 있다. 그래서 스모스하게 내려가는 모션을 줄려면 scrollIntoView이걸 사용하면 된다.

const App = () => {
  const scoll1Ref = useRef();
  
  const goBox = () => {
    scoll1Ref.current.scrollIntoView({behavior: "smooth"})
  }
  return (
    <div>
        <button onClick={goBox}>이동하기</button>
    	<div></div>
        <div></div>
        <div ref={scoll1Ref}></div>
    	<div></div>
    </div>
    )
}

이런식으로 하면 3번째 div 까지 스크롤이 되면서 이동을 할 수 있다.

하지만 ios에는 smooth가 안되어서 polyfill을 인스톨을 해야한다.

npm i smoothscroll-polyfill

해당 폴리필을 다운받고

      smoothscroll.polyfill();
      scoll1Ref.current.scrollIntoView({ behavior: "smooth" });

이런식으로 넣어주었더니 잘 작동 하였다.