element.scrollIntoView

요약

scrollIntoView() 메서드는 엘리먼트가 화면 상에 보일 수 있도록 화면을 스크롤 합니다.

문법

element.scrollIntoView(alignWithTop);
alignWithTop Optional
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) ? ? ?

참고

다른 엘리먼트 레이아웃의 영향을 받아서 정확하게 스크롤 영역의 상단 또는 하단으로 스크롤 되지 않을 수도 있습니다.

명세서

문서 태그 및 공헌자

 이 페이지의 공헌자: fscholz, khalid32, hooriza
 최종 변경: khalid32,