element.scrollIntoView

문법

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

Parameters

alignToTop Optional

Boolean 값:

• true일때, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value.
• false일때, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.

scrollIntoViewOptions Optional

다음의 프로퍼티를 가지는 객체

behavior Optional

전환에니메이션을 정의.
"auto", "smooth"중 하나 선택. 기본값은 "auto".

block Optional

수직 정렬을 정의
"start", "center", "end", "nearest"중 하나 선택. 기본값은 "start".

inline Optional

수평 정렬을 정함
One of "start", "center", "end", "nearest"중 하나 선택. 기본값은 "nearest".

예제

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

Notes

다른 요소의 레이아웃에 따라 위쪽 또는 아래쪽으로 완전히 스크롤되지 않을 수 있습니다.

Specifications

브라우저 호환성

더보기

• Element.scrollIntoViewIfNeeded()