TIL, Safari smooth scroll 이슈
이슈 사항
css를 통해 scroll-behavior에 smooth를 설정하거나, javascript 에서 scrollTo 메서드를 사용 할 때 behavior 속성을 smooth로 설정 할 경우 스크롤 이동시 부드럽게 이동하는 효과를 부여 할 수 있다.
보통의 경우 해당 효과가 적용 되어 정상 작동하는것을 확인 할 수 있지만, ios 와 safari 브라우저의 경우 적용이 되지 않는 이슈를 발생하게 되었다.
에러 발생 원인
caniuse 에서 scroll-behavior 호환성을 체크해보니 safari 그리고 ios는 최신 버전에서만 정상 작동한다고 표시가 되있었다.
해결 방법
해당 호환성 이슈를 해결하기 위해 smoothscroll 이라는 javascript polyfill을 적용했다. 사용 방법은 매우 간단하다
- 해당 폴리필 라이브러리를 프로젝트에 설치 (CDN을 통해 가져오는 방법도 있음)
- smoothscroll 을 import 한 뒤 polyfill() 을 실행합니다.
- 기본 사용 방법
- nextjs에서 사용하는 경우
- CRA를 통해 생성한 react 프로젝트에서 사용하는 경우 (useEffect 내부에서 실행)