---
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>