λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
πŸ’‘ issue

Safari λΈŒλΌμš°μ € scroll-behavior 이슈

by HandHand 2022. 6. 11.

πŸ“Œ λΆ€λ“œλŸ¬μš΄ 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 ?

iOS μͺ½μ΄ λ¬Έμ œμ˜€λ‹€..πŸ˜…

 

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?

λ°˜μ‘ν˜•

πŸ’¬ λŒ“κΈ€