базовый курс

ГРУППА КУРСА

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

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

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

HTML код:

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
9
10
11
<div style="width: 1500px; height: 1100px; padding: 400px">
Вертикальная: <span id="yscroll">0</span><br>
Горизонтальная: <span id="xscroll">0</span>
</div>

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

JavaScript:

13
14
15
16
17
18
19
var x = document.getElementById('xscroll');
var y = document.getElementById('yscroll');
document.onscroll = function (event)
  { 
  x.innerHTML = window.pageXOffset;
  y.innerHTML = window.pageYOffset;
  };