[css] iOS 모바일에서 scroll-behavior smooth 속성이 적용되지 않을 때, 부드러운 스크롤 효과 적용하기

CSS에서 scroll-behavior에 smooth 속성을 직접 지정하거나, 자바스크립트에서 scrollTo 메서드 사용 시 behavior 속성을 추가 해주면 스크롤 이동 시 부드럽게 이동하는 효과를 줄 수 있다.

1. CSS

scroll-behavior:smooth;

2. JS에서 코드로 적용

  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });

 

하지만, 브라우저에서는 분명히 잘 작동이 되는데, 모바일에서는 scroll-behavior:smooth 속성이 적용되지 않는 문제가 생겼다.

 

모바일 스크롤 smooth를 검색해보았더니, 

iOS나 OSX에서의 safari에서는 Smooth Scrolling이 적용되지 않아,이를 해결하기 위해서는 자바스크립트 폴리필이 필요하다고 한다.

 

3. JS polyfill 적용

smoothscroll폴리필 라이브러리를 설치하고 적용해 문제를 해결하였다.

GitHub - iamdustan/smoothscroll: Scroll Behavior polyfill

 

import smoothscroll from 'smoothscroll-polyfill';

// kick off the polyfill!
smoothscroll.polyfill();

 

 

 

참고

https://stackoverflow.com/questions/66262494/how-to-enable-smooth-scrolling-on-mobile-ios