scroll

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

Событие scroll возникает когда вид документа или элемента прокручивается.

Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно-емкие операции, такие как модификации DOM. Вместо этого рекомендуется регулировать событие, используя requestAnimationFrame (), setTimeout () или CustomEvent.

Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведенная ниже оптимизация часто не требуется. В примере ниже оптимизируется событие scroll для requestAnimationFrame:

// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // Do something with the scroll position
}

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;
  }
});

Общая информация

Спецификация
DOM L3
Интерфейс
UIEvent
Всплытие
События не всплывают на элементах, но всплывают к default view когда возникают на document'е
Отменяемое
Нет
Цель
defaultView, Document, Element
Действие по умолчанию
Никакого

Свойства

Property Type Description
target Только для чтения EventTarget Цель события (the topmost target in the DOM tree).
type Только для чтения DOMString Тип события.
bubbles Только для чтения Boolean Whether the event normally bubbles or not.
cancelable Только для чтения Boolean Whether the event is cancellable or not.
view Только для чтения WindowProxy document.defaultView (window of the document)
detail Только для чтения long (float) 0.

Спецификация

Спецификация Статус
Document Object Model (DOM) Level 3 Events Specification Устаревшая

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
scroll eventChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 6IE Полная поддержка 9Opera Полная поддержка 11.6Safari Полная поддержка 2WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 6Opera Android Полная поддержка 12Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка