window.scroll smooth 크로스브라우징 이슈

window의 객체의 scrollTo API에 behavior: "smooth" 속성이 있다.

 

크롬에서는 smooth 하게 잘 동작을 하나 iOS / safari 에서는 정상 작동이 되지 않는다.

 

그러하여 폴리필이 필요하고, https://www.npmjs.com/package/smoothscroll-polyfill 해당 라이브러리를 이용해 이슈를 해결한적이 있다.

 

폴리필을 이용해 브라우저에서 지원해주지 않는 기능을 변환하여 사용할 수 있다.

 

import smoothscroll from 'smoothscroll-polyfill';

...

const scrollToTop = useCallback(()=> {
	window.scrollTo({top: 0, left:0, behavior: 'smooth'}),
},[]);

if(typeof window !== 'undefined') smoothscroll.polyfill();

 

 

Reference

https://ko.javascript.info/polyfills