element.scrollIntoView

Element 인터페이스의 scrollIntoView() 메소드는 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 This is an experimental API that should not be used in production code.
다음의 프로퍼티를 가지는 객체
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

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'Element.scrollIntoView()' in that specification.
Working Draft Initial definition

브라우저 호환성

BCD tables only load in the browser

더보기