특정 스크롤 요소가 보이게 하려면?

웹 개발을 하다보면, 스크롤 되는 요소들을 스타일링 하게 되고 스크롤이벤트가 아닌 자바스크립트를 활용하여 스크롤되는 것 처럼 보이게 해야하는 경우도 생기게 되기 마련이다.

 

 그렇다면 그 요소를 스크롤에서 보이게 하는 함수가 있을까? 

 

Element.scrollIntoView();

 

이런 함수가 있다. 엘리먼트에서 저 함수를 호출하면, 스크롤 되는 박스 안에서 해당 요소가 화면에 보이게 되는데, 보이는 기준도 option을 통해서 컨트롤 할 수 있다.

 

element.scrollIntoView({
	block: 수직 정렬
    inline: 수평 정렬
    behavior: 움직임 설정
})

만약 block이 top이라면 스크롤되는 부모의 상단에 정렬되고, bottom이라면 해당 부모의 하단에 정렬된다.