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
|
---
title: 'Document: событие scroll'
slug: Web/API/Document/scroll_event
tags:
- API
- DOM
- Document
- Event
- Scroll
- UIEvent
- Источник
translation_of: Web/API/Document/scroll_event
---
<p>{{APIRef}}</p>
<p>Событие <strong><code>scroll</code></strong> возникает при прокрутке области просмотра документа или элемента.</p>
<table class="properties">
<thead>
</thead>
<tbody>
<tr>
<th>Всплытие</th>
<td>Да</td>
</tr>
<tr>
<th>Отменяемый</th>
<td>Нет</td>
</tr>
<tr>
<th>Интерфейс</th>
<td>{{DOMxRef("Event")}}</td>
</tr>
<tr>
<th>Свойство обработчика событий</th>
<td>{{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}</td>
</tr>
</tbody>
</table>
<div class="blockIndicator note">
<p><strong>Примечание:</strong> В iOS UIWebViews события <code>scroll</code> не срабатывают во время самого прокручивания, только по его завершении. См. <a href="https://github.com/twbs/bootstrap/issues/16202">issue в Bootstrap #16202</a>. Safari и WKWebViews не подвержены этому багу.</p>
</div>
<h2 id="Примеры">Примеры</h2>
<h3 id="Пропуск_тактов_события_прокрутки">Пропуск тактов события прокрутки</h3>
<p>Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно-ёмкие операции, такие как модификации DOM. Вместо этого рекомендуется пропускать такты события, используя {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}} или {{DOMxRef("CustomEvent")}}, как показано ниже.</p>
<p>Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведённая ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие <code>scroll</code> для <code>requestAnimationFrame</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) {
// Делаем что-нибудь с позицией скролла
}
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>
<p>Больше похожих примеров можно найти на странице события <code><a href="/ru/docs/Web/API/Window/resize_event">resize</a></code>.</p>
<h2 id="Спецификация">Спецификация</h2>
{{Specifications}}
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Element/scroll_event">Element: событие <code>scroll</code></a></li>
</ul>
|
