element.scrollIntoView

이동:
  1. 요약
  2. 문법
  3. 예제
  4. 브라우저 호환성
  5. 참고
  6. 명세서

요약

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>

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,