요약
scrollIntoView() 메서드는 엘리먼트가 화면 상에 보일 수 있도록 화면을 스크롤 합니다.
문법
element.scrollIntoView(alignWithTop);
-
alignWithTopOptional -
true일 경우 엘리먼트가 스크롤 영역의 상단에 위치하도록 스크롤 됩니다. 만약false인 경우 스크롤 영역의 하단에 위치하게 됩니다.
Note: 지정하지 않으면 엘리먼트는 스크롤 영역의 상단에 위치하도록 스크롤 됩니다.
예제
<!DOCTYPE html>
<html>
<head>
<title>ScrollIntoView() example</title>
<script type="text/javascript">
function showIt(elID) {
var el = document.getElementById(elID);
el.scrollIntoView(true);
}
</script>
</head>
<body>
<div style="height: 5em; width: 30em; overflow: scroll;
border: 1px solid blue;">
<div style="height: 100px"></div>
<p id="pToShow">The para to show</p>
<div style="height: 100px"></div>
</div>
<input type="button" value="Show para"
onclick="showIt('pToShow');">
</body>
</html>
브라우저 호환성
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier) | 6 | 10.0 and possibly older versions | 4 and possibly older versions |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 1.0 (1.0) | ? | ? | ? |
참고
다른 엘리먼트 레이아웃의 영향을 받아서 정확하게 스크롤 영역의 상단 또는 하단으로 스크롤 되지 않을 수도 있습니다.