TIL 78일차

설정페이지 작업을 하던 도중 최상단 div에 overflow를 적용시키고 계정 설정과 알림설정 버튼 클릭시 스크롤이 이동이 안되는 문제점이 발생했습니다!!

• 시도 해본 방법

1. react-scroll 라이브러리를 사용해서 이동하게 시도를 해봤지만 overflow를 풀면 적용되고/ overflow를 적용시키면 적용이 되지 않았습니다

2. window.scrollTo() - 문서의 지정된 위치로 스크롤해주는 기능을 사용 해봤습니다. document.querySelector("#아이디값").offsetTop; 으로 원하는 위치의 top좌표값을 받아와서
   window.scrollTo({top, left, behavior})형식으로 작성 해보았지만 적용이 되지 않았습니다
   // top : 세로위치, left: 가로위치, behavior: 스크롤 효과속성

3. useRef를 이용해 원하는 위치로 이동하게 시도를 해보 았지만 적용이 되지 않았습니다!!

• 해결 방법

1. scrollIntoView() 메소드를 사용하였습니다! 각 버튼 클릭시 이동이 되는 것을 적용이 되었지만 부드럽게 이동하는 것이 적용이 되지 않아 검색을 해보았는데 구글, 사파리등 몇몇 브라우저에서는 부드럽게 이동하는 것이 적용이 안될수 있다고 하여 라이브러리를 이용하여 적용을 시킴
   // yarn add seamless-scroll-polyfill