1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: scroll
slug: Web/API/Document/scroll_event
tags:
- DOM
- Event
- Event Handler
- Reference
- 레퍼런스
- 이벤트
- 이벤트핸들링
translation_of: Web/API/Document/scroll_event
---
<p>document view 나 element가 스크롤 될 때, <strong><code>scroll</code></strong> 이벤트가 발생합니다.</p>
<h2 id="개요">개요</h2>
<table class="properties">
<thead>
</thead>
<tbody>
<tr>
<th>인터페이스</th>
<td>{{domxref("UIEvent")}}</td>
</tr>
<tr>
<th>버블</th>
<td>element에는 없지만, document에서 실행될 때 버블링이 발생합니다.</td>
</tr>
<tr>
<th>취소가능여부</th>
<td>불가</td>
</tr>
<tr>
<th>타겟</th>
<td>DefaultView, {{domxref("Document")}}, {{domxref("Element")}}</td>
</tr>
<tr>
<th>기본 액션</th>
<td>없음</td>
</tr>
</tbody>
</table>
<h2 id="속성">속성</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">속성</th>
<th scope="col">타입</th>
<th scope="col">설명</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>target</code> {{readonlyInline}}</td>
<td>{{domxref("EventTarget")}}</td>
<td>이벤트 대상 (DOM 트리의 최상위 타겟)</td>
</tr>
<tr>
<td><code>type</code> {{readonlyInline}}</td>
<td>{{domxref("DOMString")}}</td>
<td>이벤트의 타입</td>
</tr>
<tr>
<td><code>bubbles</code> {{readonlyInline}}</td>
<td>{{domxref("Boolean")}}</td>
<td>이벤트가 버블이 되는지</td>
</tr>
<tr>
<td><code>cancelable</code> {{readonlyInline}}</td>
<td>{{domxref("Boolean")}}</td>
<td>이벤트 취소가 가능한지</td>
</tr>
<tr>
<td><code>view</code> {{readonlyInline}}</td>
<td>{{domxref("WindowProxy")}}</td>
<td>{{domxref("Document.defaultView")}} (document의 <code>window</code>)</td>
</tr>
<tr>
<td><code>detail</code> {{readonlyInline}}</td>
<td><code>long</code> (<code>float</code>)</td>
<td><code>0</code>.</td>
</tr>
</tbody>
</table>
<h2 id="예제">예제</h2>
<h3 id="스크롤_이벤트의_조절">스크롤 이벤트의 조절</h3>
<p><code>scroll </code>이벤트가 빠른 속도로 실행될 수 있기 때문에, 이벤트 핸들러는 DOM 수정과 같이 느린 작업을 실행하지 말아야 합니다. 대신, 다음을 사용하여 이벤트를 제한하는 것을 권장합니다.<br>
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}}, 혹은, {{domxref("CustomEvent")}}</p>
<p>그러나 입력 이벤트와 애니메이션 프레임은 거의 동일한 속도로 실행되므로 아래 최적화는 종종 불필요합니다. 다음은 <code>requestAnimationFrame</code>에 대한 <code>scroll</code>이벤트를 최적화하는 예제입니다.</p>
<pre class="brush: js">// 참조: http://www.html5rocks.com/en/tutorials/speed/animations/
let last_known_scroll_position = 0;
let ticking = false;
function doSomething(scroll_pos) {
// scroll 위치에 대한 작업을 하세요
}
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(last_known_scroll_position);
ticking = false;
});
ticking = true;
}
});</pre>
<h3 id="추가_예제">추가 예제</h3>
<p>더 보려면, {{Event("resize")}} 이벤트 페이지에 비슷한 예제가 있습니다.</p>
<h2 id="사양">사양</h2>
<ul>
<li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></li>
<li><a href="http://www.w3.org/TR/cssom-view/#scrolling-0">CSSOM View</a></li>
</ul>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<h3 id="iOS_UIWebView">iOS UIWebView</h3>
<p>iOS UIWebViews에서, 스크롤 중에는 <code>scroll</code> 발생하지 않습니다. 스크롤이 끝났을 때, 발생됩니다. <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>를 참고하세요. 사파리와 WKWebViews에서는 이 문제가 발생하지 않습니다.</p>
<h2 id="같이보기">같이보기</h2>
<ul>
<li>{{domxref("GlobalEventHandlers.onscroll")}}</li>
</ul>
|
