Прокрутка страницы

Наиболее удобные способы прокрутки страницы - это использование методов scrollBy() и scrollTo() голбального объекта window. Метод scrollBy() прокручивает страницу на определённое расстояние относительно текущего положения.

window.scrollBy (смещение по горизонтали, смещение по вертикали)

Параметры:

смещение по горизонтали - смещение страницы по горизонтали в пикселях

смещение по вертикали - смещение страницы по вертикали в пикселях

Для изучения прокрутки создадим страницу и добавим на неё несколько блоков, чтобы страница не помещалась в экран.

Стиль:

7
8
9
10
11
12
13

div
  {
  height: 170px;
  width: 100px;
  margin: 10px;
  border: 1px solid Red;
  }

HTML код:

17
18
19
20
21
22

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Прокрутим созданную страницу на 50 пикселей вниз:

JavaScript:

24	window.scrollBy(0, 50);

Метод scrollTo() перемещает страницу к указанным координатам. То есть, страница перемещается на определённое количество пикселей относительно начала страницы.

window.scrollTo (координата X, координата Y)

Параметры:

координата X - координата X относительно начала докумена, на которую перемещается страница

координата Y - координата Y относительно начала докумена, на которую перемещается страница

Переместим страницу на 100 пикселей вниз относительно начала страницы:

25	window.scrollTo(0, 100);

У DOM-объектов есть метод scrollIntoView(). Этот метод прокручивает страницу так, чтобы объект оказался вверху страницы. Если методу в качестве параметра указать false, то объект будет оказываться внизу страницы.

Сделаем так, чтобы второй по счёту блок оказался вверху страницы:

24
25

let div = document.querySelectorAll('div');
div[1].scrollIntoView();

Теперь сделаем так, чтобы пятый по счёту блок оказался внизу страницы:

25	div[4].scrollIntoView(false);

Свойства pageXOffset и pageYOffset глобального объекта window позволяют узнать текущую прокрутку страницы. Координаты иногда имеют дробную часть. Это связано с тем, как они определяются в браузере. Пример:

28	console.log('Вертикальная прокрутка '+window.pageYOffset);

В прошлой теме было рассмотрено получение координат элемента относительно окна браузера. К этим координатам нужно прибавить текущую прокрутку страницы и получаются координаты элемента относительно документа. Узнаем координаты пятого по счёту блока:

29
30
31

var coord = div[4].getBoundingClientRect();
var coordDoc = coord.top + window.pageYOffset;
console.log('Координата Y '+ coordDoc);