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
다음의 프로퍼티를 가지는 객체
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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
scrollIntoView
Experimental
Chrome Full support 29Edge Full support 18
Notes
Full support 18
Notes
Notes The only parameter supported is alignToTop.
Full support 12
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Notes No support for smooth behavior.
Firefox Full support 1IE Full support 8
Notes
Full support 8
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Notes No support for smooth behavior or center options.
Opera Full support 38Safari Full support 6
Notes
Full support 6
Notes
Notes No support for smooth behavior or center options.
WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 5
Notes
Full support 5
Notes
Notes No support for smooth behavior or center options.
Samsung Internet Android Full support Yes
scrollIntoViewOptions
Experimental
Chrome Full support 61
Notes
Full support 61
Notes
Notes The block and inline options support the values start, center, end, nearest.
Edge No support NoFirefox Full support 36
Notes
Full support 36
Notes
Notes No support for inline option.
Notes Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
IE No support NoOpera Full support 48
Notes
Full support 48
Notes
Notes The block and inline options support the values start, center, end, nearest.
Safari No support NoWebView Android Full support 61
Notes
Full support 61
Notes
Notes The block and inline options support the values start, center, end, nearest.
Chrome Android Full support 61
Notes
Full support 61
Notes
Notes The block and inline options support the values start, center, end, nearest.
Firefox Android Full support 36
Notes
Full support 36
Notes
Notes No support for inline option.
Notes Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
Opera Android Full support 45
Notes
Full support 45
Notes
Notes The block and inline options support the values start, center, end, nearest.
Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

더보기