element.scrollIntoView

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020년 1월⁩.

* Some parts of this feature may have varying levels of support.

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

문법

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

매개변수

alignToTopOptional

불리언 값입니다.

true일 경우, 요소의 상단은 스크롤 가능한 조상 요소의 보이는 영역 상단에 정렬됩니다.scrollIntoViewOptions: {block: "start", inline: "nearest"}와 일치합니다.이 값이 기본 값입니다.
false일 경우, 요소의 하단은 스크롤 가능한 조상 요소의 보이는 영역 하단에 정렬됩니다.scrollIntoViewOptions: {block: "end", inline: "nearest"}와 일치합니다.

scrollIntoViewOptionsOptional Experimental

다음 속성을 포함하는 객체입니다.

behaviorOptional

스크롤을 즉시 적용할지 아니면 부드러운 애니메이션을 적용할지 결정합니다. 이 옵션은 다음 값 중 하나의 문자열을 취해야 합니다.

smooth: 스크롤이 부드럽게 움직입니다.
instant: 스크롤이 단번에 즉시 적용됩니다.
auto: 스크롤 동작은scroll-behavior의 계산된 값에 의해 결정됩니다.

blockOptional

수직 정렬을 정의합니다.start,center,end, 또는nearest 중 하나입니다. 기본 값은start입니다.

inlineOptional

수평 정렬을 정의합니다.start,center,end, 또는nearest 중 하나입니다. 기본 값은nearest입니다.

반환 값

없음 (undefined).

예제

const element = document.getElementById("box");element.scrollIntoView();element.scrollIntoView(false);element.scrollIntoView({ block: "end" });element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });