Element.scrollIntoView()

정의

Element 인터페이스의 scrollIntoView() 메서드는
scrollIntoview()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤한다.

 

문법

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter

 

Parameters

alignToTop (optional)    -    Boolean값 이다.

    true일때, 화면 맨위에 태그를 놓는다.
    false일때, 화면 맨아래에 태그를 놓는다.

 

scrollIntoViewOptions (optional)

    behavior - 전환애니메이션 정의

        'auto' 기본값 이다.
        'smooth'는 부드러운 전환이다.

 

     block - 수직 정렬 정의
        'start' 기본값 이다.
        'center'는 수직화면의 중간에 놓는다.
        'end'는 수직화면의 끝에 놓는다.
        'nearest'는 지금 화면을 기준으로 수직화면의 처음이나 끝에 둔다.

 

    inline - 수평 정렬 정의
        'nearest'는 기본값이다.
        'start는 수평화면의 처음에 놓는다.
        'center'는 수평화면의 중간에 놓는다.
        'end'는 수평화면의 끝에 놓는다.

 

예시

const $ = tag => document.querySelector(tag);

$('#example').scrollIntoView();
$('#example').scrollIntoView(true);
$('#example').scrollIntoView({block: 'end'});
$('#example').scrollIntoView({behavior: 'smooth', block: 'center', inline: 'nearest'});

 

실습 예시

 

id가 example인 h2태그를 가지고 scrollIntoView 메서드를 사용해본다.

먼저, scrollIntoView(true)를 주면 해당태그를 화면 위에 전환효과없이 놓는다.

---

ELement.scrollIntoView(false)를 줬을땐 화면전환 없이 화면 하단에 Tag가 놓인다

---

Element.scrollIntoView({behavior: 'smooth', block: 'center'}) 값을 줬을때 부드럽게 중간 해당 태그를 화면 중앙에 놓는다.