Safari 브라우저 scroll-behavior 이슈

📌 부드러운 scroll 동작 구현하기

이전 회사에서 프로젝트를 진행할 때 이벤트 페이지에서

앵커 버튼 클릭 시 특정 위치로 이동해야하는 요구사항이 있었습니다.

직접 offsetTop 을 지정해주는 애니메이션을 구현하거나

window 객체에서 제공하는 Web API 를 사용하는 방법들이 있는데,

구현을 간단하게 하기 위해서 이중 window.scrollTo 를 사용했습니다.

그리고 부드러운 움직임을 위해 behavior 로 smooth 로 지정했습니다.

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

📌 AOS 에서는 잘 되는 것 같은데.. iOS는..?

해당 코드를 앱에 배포해보니 안드로이드 폰에서는 잘 동작하는데

아이폰에서는 smooth 동작이 적용되지 않는 문제가 발생했습니다.

찾아보니 safari 브라우저는 15.4 버전부터 해당 기능을 제공하고 있었습니다.

Can I use `scroll-behavior` ?

Safari 15.4 release notes

safari 15.4 버전 배포 사항에 중간쯤 내려보면 다음과 같이

새로운 Web API 항목이 추가된 것을 알 수 있습니다.

• Added support for the CSS scroll-behavior property and ScrollOptions,
allowing smooth scrolling to anchors or via JavaScript.

저희 앱은 iOS webview safari 14.x 부터 지원이 가능해야해서

smooth 한 동작을 제공하기 위해 다른 추가적인 작업이 필요했습니다.

📌 Safari 브라우저에서 behavior smooth 적용하기

이를 해결하기 위해 JavaScript 로 스크롤 동작을 직접 구현하면 됩니다.

Web API 로 제공되는 requestAnimationFrame 등을 이용해서 애니메이션 효과를 구현하면 되는데

직접 구현해도 좋지만, 이미 같은 문제로 고민을 했던 개발자분들이 해당 기능을 제공해주는

polyfill 을 구현해서 배포해놨기 때문에 이번에는 이를 활용하는 방법을 사용하겠습니다.

💡 polyfill 을 추가하는 방법은?

polyfill 을 추가하는 방법은 두 가지가 있습니다.

1️⃣ CDN 으로 추가하기

<head> 태그에 다음 스크립트 로드 코드를 삽입해줍니다.

이는 cdnjs 에 배포되어있는 파일을 직접 로드하는 방법입니다.

<html lang="en">
    <head>
        <script
      defer
      src="https://cdnjs.cloudflare.com/ajax/libs/iamdustan-smoothscroll/0.4.0/smoothscroll.min.js"
    ></script>
    </head>
</html>

2️⃣ Package 로 추가하기

다음은 npm 과 같은 package manager 에 등록된 패키지를 다운받아 사용하는 방법입니다.

이를 위해 CRA 로 간단한 React 환경을 구축한 뒤 진행했습니다.

프로젝트가 생성되면 해당 polyfill 모듈을 다운받습니다.

> npm i smoothscroll-polyfill

그리고 해당 polyfill 을 추가하는 함수를 App.js 에서 실행해줍니다.

import smoothscroll from "smoothscroll-polyfill";

export default function App() {

  useEffect(() => {
    smoothscroll.polyfill();
  }, []);

    // ...
}

📌 code sandbox 로 테스트하기

해당 polyfill 이 적용된 간단한 테스트용 프로젝트입니다.

safari 브라우저에서 확인해보면 polyfill 적용 전과 후의 비교가 가능합니다 😀.

📌 참고 자료

Apple Developer Documentation

CSSOM Scroll-behavior | Can I use... Support tables for HTML5, CSS3, etc

Is there a Safari equivalent for scroll-behavior: smooth;?

smoothscroll/smoothscroll.js at master · iamdustan/smoothscroll

How to enable smooth scrolling on mobile iOs?

'💡 issue' 카테고리의 다른 글

storybook 에서 styled component css prop 적용이 안된다면? (0)	2023.05.15
JavaScript 로 생성한 csv 파일에서 한글이 깨진다면? (0)	2023.03.18
Safari 브라우저 window.open block 이슈 (0)	2022.11.26
-webkit-overflow-scrolling 속성과 stacking context 이슈 (0)	2022.07.04
Next.js window is not defined 원인 및 해결방법 (0)	2022.06.17

sondev.log

Safari 브라우저 scroll-behavior 이슈

📌 부드러운 scroll 동작 구현하기

📌 AOS 에서는 잘 되는 것 같은데.. iOS는..?

Can I use `scroll-behavior` ?

Safari 15.4 release notes

📌 Safari 브라우저에서 behavior smooth 적용하기

💡 polyfill 을 추가하는 방법은?

📌 code sandbox 로 테스트하기

📌 참고 자료

'💡 issue' 카테고리의 다른 글

💬 댓글

티스토리툴바

Safari 브라우저 scroll-behavior 이슈

📌 부드러운 scroll 동작 구현하기

📌 AOS 에서는 잘 되는 것 같은데.. iOS는..?

Can I use scroll-behavior ?

Safari 15.4 release notes

📌 Safari 브라우저에서 behavior smooth 적용하기

💡 polyfill 을 추가하는 방법은?

📌 code sandbox 로 테스트하기

📌 참고 자료

'💡 issue' 카테고리의 다른 글

📚 관련글

💬 댓글

티스토리툴바

Can I use `scroll-behavior` ?