JavaScript - scrollIntoView() 이란

 

 

 

 

화면 바깥으로 삐져나가 스크롤해야만 볼수있는 메뉴 탭이 있다.

살짝 화면을 삐져나간 메뉴를 클릭하면, 메뉴탭은 삐져나간 그자리 그대로 있고, 내용만 바뀐다.

뭔가 이상하지 않은가? 보통은 메뉴을 누르면 자동으로 스르륵 화면 중간쯤 알아서 스크롤되는 동작에 익숙하지 않은가?

그 기능을 위해 javaScript 내장메서드인  scrollIntoView() 를 알아보자

 

---

JavaScript - scrollIntoView() 이란

 

이 메소드는 scrollIntoView()가 호출된 엘레멘트를 유저가 볼수있는 부분으로 상위 컨테이너를 스크롤 한다

The Element interface's scrollIntoView() method scrolls the element's ancestor containers such that the element on which scrollIntoView() is called is visible to the user.

 

 

Options

 

상하로는 (화면기준) top 으로  좌우로는 가장 가까운곳에 스크롤이 이동한다

element.scrollIntoView(true)   //  {block: "start", inline: "nearest"}

 

상하로는 (화면기준) bottom 으로  좌우로는 가장 가까운곳에 스크롤이 이동한다

element.scrollIntoView(false)  //  {block: "end", inline: "nearest"}

 

 

behavior

스크롤 움직임(transition animation) 을 정한다.

 

element.scrollIntoView({ behavior: 'auto' })  // default 스크롤이 딱딱하게 움직인다.

element.scrollIntoView({ behavior: 'smooth' }) 스크롤이 부드럽게 움직인다.

 

 

block

스크롤의 상하방향(vertical) 어느선에서 멈출지 정한다.

 

element.scrollIntoView({ block: 'nearest' })  // default 

element.scrollIntoView({ block: 'start' })

element.scrollIntoView({ block: 'center' })  

element.scrollIntoView({ block: 'end' })

 

 

inline

스크롤의 좌우방향(horizontal) 어느정도 선에서 멈출지 정한다.

 

element.scrollIntoView({ inline: 'nearest' })  // default 

element.scrollIntoView({ inline: 'start' })

element.scrollIntoView({ inline: 'center' })  

element.scrollIntoView({ inline: 'end' })

 

 

브라우저별 호환성 

option 은 사파리에서 지원하지 않는다