diff options
Diffstat (limited to 'files/ko/web/api/element/scrollintoview/index.html')
-rw-r--r-- | files/ko/web/api/element/scrollintoview/index.html | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/files/ko/web/api/element/scrollintoview/index.html b/files/ko/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..1736aa2e40 --- /dev/null +++ b/files/ko/web/api/element/scrollintoview/index.html @@ -0,0 +1,88 @@ +--- +title: element.scrollIntoView +slug: Web/API/Element/scrollIntoView +translation_of: Web/API/Element/scrollIntoView +--- +<div> +<p>{{APIRef("DOM")}}</p> + + + +<p>{{domxref("Element")}} 인터페이스의 <strong><code>scrollIntoView()</code></strong> 메소드는 <code>scrollIntoView()</code>가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.</p> +</div> + +<h2 id="Syntax" name="Syntax">문법</h2> + +<pre><em>element</em>.scrollIntoView(); +<em>element</em>.scrollIntoView(<var>alignToTop</var>); // Boolean parameter +<em>element</em>.scrollIntoView(<var>scrollIntoViewOptions</var>); // Object parameter</pre> + +<dl> + <dt> + <h3 id="Parameters">Parameters</h3> + </dt> + <dt><code>alignToTop</code> {{optional_inline}}</dt> + <dd>{{jsxref("Boolean")}} 값: + <ul> + <li><code>true</code>일때, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. This is the default value.</li> + <li><code>false</code>일때, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code>.</li> + </ul> + </dd> + <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt> + <dd>다음의 프로퍼티를 가지는 객체</dd> + <dd> + <dl> + <dt><code>behavior</code> {{optional_inline}}</dt> + <dd>전환에니메이션을 정의.<br> + <code>"auto"</code>, <code>"smooth"</code>중 하나 선택. 기본값은 <code>"auto"</code>.</dd> + <dt><code>block</code> {{optional_inline}}</dt> + <dd>수직 정렬을 정의<br> + <code>"start"</code>, <code>"center"</code>, <code>"end"</code>, <code>"nearest"</code>중 하나 선택. 기본값은 <code>"start"</code>.</dd> + <dt><code>inline</code> {{optional_inline}}</dt> + <dd>수평 정렬을 정함<br> + One of <code>"start"</code>, <code>"center"</code>, <code>"end"</code>, <code>"nearest"</code>중 하나 선택. 기본값은 <code>"nearest"</code>.</dd> + </dl> + </dd> +</dl> + +<h2 id="Example" name="Example">예제</h2> + +<pre><code>var element = document.getElementById("box"); + +element.scrollIntoView(); +element.scrollIntoView(false); +element.scrollIntoView({block: "end"}); +element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});</code></pre> + +<h2 id="Notes">Notes</h2> + + + +<p>다른 요소의 레이아웃에 따라 위쪽 또는 아래쪽으로 완전히 스크롤되지 않을 수 있습니다.</p> + +<h2 id="Specifications">Specifications</h2> + +<table> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("api.Element.scrollIntoView")}}</p> + +<h2 id="더보기">더보기</h2> + +<ul> + <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}<a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview"> </a></li> +</ul> |