Индикатор положения прокрутки страницы

Сегодня очень модно показывать текущее положение прокрутки страницы вверху этой самой страницы. Кому-то из разработчиков пока недостаточным наличие «лифта справа» и, вот он новый элемента дизайна многих страниц в интернете. Ну да ладно, не стану пытаться искать причины столь наличия столь странного элемента, а лишь покажу как легко он делается.

Ссылка на ДЕМО.

Начнем, пожалуй, с разметки страницы. Пусть она будет очень простой:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="progress"></div>

  <section></section>
</body>
</html>

Сама страница состоит из двух элементов:

<div class="progress" /> – собственно, сам индикатор
<section /> – просто блок с большой высотой, чтобы было что скролить.

Все это надо аккуратно оформить:

body {
  padding: 0;
  margin: 0;
}
section {
  display: block;
  height: 20000px;
  background-color: #ddd;
}
.progress {
  left: 0;
  top: 0;
  width: 0;
  height: 5px;
  background-color: #f00;
  position: fixed;
  z-index: 2;
  animation: width 10ms ease-in;
}

Для section установим высоту в 20 000 пикселей, а индикатор .progress пусть будет красного цвета и расположен фиксировано вверху страницы.

А теперь JavaScript, который отвечает за работу индикатора:

!function(window) {
  var document = window.document;
  var pageProgressNode = document.querySelector('.progress');
  var windowScrollHeight = document.body.scrollHeight;
  var windowVisibleHeight = window.innerHeight;

  window.addEventListener('scroll', function() {
    var scrollPosition = (document.documentElement.scrollTop ? document.documentElement : document.body).scrollTop;
    var pageProgressWidth = Math.min(100, scrollPosition / (windowScrollHeight - windowVisibleHeight) * 100);

    pageProgressNode.style.width = pageProgressWidth + '%';
  });
}(this);

Делает этот код следующее: высчитывает в процентах текущее положение прокрутки var pageProgressWidth = Math.min(100, scrollPosition / (windowScrollHeight - windowVisibleHeight) * 100), где scrollPosition – значение положения прокрутки (в пикселях), windowScrollHeight – общая высота страницы (в пикселях), windowVisibleHeight – видимая часть страницы (снова в пикселях). А затем устанавливает полученное значение как ширину нашего индикатора: pageProgressNode.style.width = pageProgressWidth + '%'.

Тут есть один «хак» (document.documentElement.scrollTop ? document.documentElement : document.body).scrollTop. Он необходим, чтобы индикатор работал в Firefox.

Индикатор положения прокрутки страницы

Комментарии