aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/api/element/scrollintoview/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web/api/element/scrollintoview/index.html')
-rw-r--r--files/ko/web/api/element/scrollintoview/index.html88
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>