Событие прокрутки

Событие scroll срабатывает на элементе, когда этот элемент прокручивается. Прокрутку страницы можно отследить, если поставить обработчик на объект window. Событие возникает при любой прокрутке, независимо от того, каким способом она осуществляется. При обработке данного события обычно есть необходимость получить текущую прокрутку элемента или страницы.

Создадим обработчик события onscroll, который выводит на экран текущую прокрутку страницы. О том, как это делается, я рассказывал в этой теме. Чтобы у страницы появилась прокрутка, добавим на неё блок большого размера:

HTML код:

<div style="width: 1500px; height: 1100px; padding: 400px">
  Вертикальная: <span id="yscroll">0</span><br>
  Горизонтальная: <span id="xscroll">0</span>
</div>

В тэги <span> будем записывать текущую прокрутку. Обработчик onscroll будет такой:

JavaScript:

let x = document.getElementById('xscroll');
let y = document.getElementById('yscroll');

document.onscroll = function()
{ 
  x.innerHTML = window.pageXOffset;
  y.innerHTML = window.pageYOffset;
};