базовый курс

ГРУППА КУРСА

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

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

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

Параметры:

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

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

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

Стиль:

+
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>
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
var 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);