Element
인터페이스의 scrollIntoView()
메소드는 scrollIntoView()
가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.
문법
element.scrollIntoView(); element.scrollIntoView(alignToTop); // Boolean parameter element.scrollIntoView(scrollIntoViewOptions); // Object parameter
-
Parameters
alignToTop
OptionalBoolean
값:true
일때, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds toscrollIntoViewOptions: {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 toscrollIntoViewOptions: {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
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