π λΆλλ¬μ΄ 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 andScrollOptions
,
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
μ μ© μ κ³Ό νμ λΉκ΅κ° κ°λ₯ν©λλ€ π.
π μ°Έκ³ μλ£
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
'π‘ 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 |
π¬ λκΈ