[JS] scrollIntoView 해당 요소로 Focus하기, 해당 요소로 스크롤 하기

리스트 형식의 화면을 구성하거나, 한 페이지에서 스크롤을 사용하고 싶은 경우 예전에는 그 움직이고자 하는 요소의 위치 값을 받아와 scollto 함수를 사용하여 스크롤을 하곤 했는데 더 좋은 방법을 찾았네요.

스크롤 기능을 구현할 때 다른 방법으로는 jQuery 스크롤, window함수 사용 등 다양한 방법이 있지만 해당 요소의 위치 값을 얻어오고 전체 list에서 위치값을 구해 옮기는 등 다소 불편하고 복잡한 경우가 있는데 이 방법은

진짜 간단하게 jQuery 추가 없이 스크롤만 사용하기엔 너무 좋은 방법이라 공유 및 정리합니다. 

 

저는 이코드를 프로젝트에서 리스트 안에 2번째 img태그부터 스크롤이 되어 출력되고자 했고 부가적인 기능은 없었습니다. 이미지의 요소(dom)을 받아와 해당 함수만 실행해주면 그 요소로 스크롤이 되는 함수 입니다. 

 

How to Use

---

const target = $(".target");
// or
const target = document.querySelector('.target')

target.scrollIntoView(true);

문서에 따르면 해당 요소의 부모 요소를 컨트롤 하는 함수입니다.

Parameters 값으로는 1개의 값을 받는데 데이터 타입에 따라 더 디테일한 요소를 줄 수 있다.

Parameters	설명
scrollIntoView()	Default는 true이므로 값이 없다면 true로 취급
scrollIntoView(alignToTop)	true : 해당 요소의 상단을 기준으로 부모 스크롤 false : 해당 요소의 하단을 기준으로 부모 스크롤
scrollIntoView(scrollIntoViewOptions)	behavior : {smooth : 스크롤 부드럽게 | instant : 즉시 | auto : 자동} block : { start | center | end } Default : start inline : { start | center | end } Default : nearest ex) { behavior: "smooth", block: "end", inline: "nearest" }

 

Element: scrollIntoView() method - Web APIs | MDN

 

 

Example

---

See the Pen ScrollIntoView by 정재준 (@ihistdxo-the-builder) on CodePen.