js scroll을 부드럽게 만드는 방법 (+ 사파리 적용)

scroll을 smoth하게 올라가는 기능이 사파리에서 지원된다고 한다. 관련해서 정리해보려고 한다.

 

✔️ 스크롤을 부드럽게 움직이기

---

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Window.scrollTo() - Web APIs | MDN

상단 MDN을 참고하여 보면 원하는 스크롤로 움직이기 위해서는 다음과 같은 형식으로 스크롤 위치를 지정하여주면 된다.

// window.scrollTo(X, Y);
window.scrollTo(0, 1000);

window.scrollTo({
  top: 100,
  left: 100
});

다만 이렇게 하면 스크롤이 자연스럽지 않고 갑자기 튕기는 느낌을 줄 수 있는데, 이때 부드러운 스크롤링을 위해서는 다음와 같은 옵션을 추가해주면 해결된다.

window.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

 

✔️ behavior smooth는 아무데서나 다 될까?

---

 

항상 문제가 되는 부분은 크롬과 사파리의 차이에서 있다. behavior: 'smooth'라는 옵션은 크롬에서는 잘 적용되었지만 사파리에서는 적용되지 않는다. 사파리에 적용하기 위해서는 스크롤 관련 polyfill npm (smoothscroll-polyfill)을 많이들 설치하여 사용한다.

https://www.npmjs.com/package/smoothscroll-polyfill

smoothscroll-polyfill

 

 

✔️ npm 설치 없이 사파리에서 스크롤 옵션이 적용되는 조건

---

사파리는 22년 3월경 15.4 버전으로 업데이트를 진행하였다. 당시의 릴리즈 노트를 보면 smooth scrolling을 허용한다는 이야기가 있다. 

https://developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes

Apple Developer Documentation

나온지 1년도 안 된 최신버전이라서 사람들이 많이 사용하지 않으면 어떡하지 라고 했는데, 이곳저곳 확인해보았을 때에는 이 이하버전의 사용률이 그렇게 높지는 않다. 하지만 언제나 제로의 확률이 있는 것은 아니니 주의해야 할 것 같다.

 

✔️ 스타일로 풀어내는 방법

---

https://hyermione.tistory.com/121

css scroll을 부드럽게 만드는 방법 (+ 사파리 지원 버전)