[JavaScript] 특정 요소 element 위치로 스크롤 이동하는 방법 scrollIntoView

Intro

안녕하세요. 모바일 네비게이션 메뉴에서 스크롤 이동을 표현해야 했습니다. 여러 방법이 있겠지만 저는 특정 요소 위치로 스크롤 이동할 수 있는 scrollIntoView 함수를 사용했습니다.

 

Syntax

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

alignToTop

- true : aligned to the top 상단 기준 스크롤 이동 |  scrollIntoViewOptions: {block: "start", inline: "nearest"}

- false : aligned to the bottom 하단 기준 스크롤 이동 |  scrollIntoViewOptions: {block: "end", inline: "nearest"}

 

scrollIntoViewOptions

- behavior : 에니메이션 | smooth, instant, auto 

- block : 수직 정렬 | start, center, end, or nearest. Defaults to start

- inlihne : 수평 정렬 | start, center, end, or nearest. Defaults to nearest

 

 

---

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView