initial commit

1 files changed, 100 insertions, 0 deletions

diff --git a/files/ru/web/api/document/scroll_event/index.html b/files/ru/web/api/document/scroll_event/index.html
new file mode 100644
index 0000000000..041c505630
--- /dev/null
+++ b/files/ru/web/api/document/scroll_event/index.html
@@ -0,0 +1,100 @@
+---
+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 notranslate">// Источник: 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>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-scroll')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Document.scroll_event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Element/scroll_event">Element: событие <code>scroll</code></a></li>
+</ul>