Индикатор позиции чтения. Часть 3
Расчет ширины/высоты окна и документа в JavaScript запутан и сильно различается от браузера к браузеру. К счастью, jQuery позволяет нам абстрагироваться от этой сложности и предоставляет более удобный механизм для вычисления размеров окна и документа. Поэтому, в остальной части статьи для реализации индикатора прогресса чтения мы будем полагаться на jQuery.
До того как мы приступим непосредственно к вычислениям, нам необходимо подключить библиотеку jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
jQuery нам нужен для расчета значений атрибутов max и value:
- max – значением атрибута max является та часть документа, которая лежит вне видимой области просмотра и которая может быть рассчитана путем вычитания высоты окна из высоты документа.
var winHeight = $(window).height(),
docHeight = $(document).height();
var max = docHeight - winHeight;
$('progress').attr('max', max);
- value – первоначально, значение этого атрибута установлено в ноль (его мы уже записали в разметке). Однако, как только пользователь начинает прокручивать страницу, вертикальный отступ верхнего края документа от верхнего края окна будет увеличиваться. Если, полоса прокрутки в самом верху или, если элемент не может быть промотан, смещение будет равняться нулю.
var value = $(window).scrollTop();
$('progress').attr('value', value);
Вместо использования объекта document в $(document).height(), мы можем использовать такие элементы как section, article или div, которые содержат контент**,** для вычисления более точной позиции индикатора прогресса чтения. Такое уточнение становится важным, когда у вас есть статья в блоге, которая содержит очень много комментариев, которые по объему занимают более половины статьи.
Теперь, каждый раз, когда пользователь будет проматывать страницу, нам будет необходимо пересчитывать y-отступ от верхнего края окна и затем назначать его атрибуту value индикатора. Обратите внимание, что атрибут max остается тем же и не меняет своего значения, когда пользователь скролит страницу.
$(document).on('scroll', function() {
var value = $(window).scrollTop();
progressBar.attr('value', value);
});
Направление, в котором пользователь скролит страницу, не имеет значение, так как мы всегда вычисляем y-отступ от верха окна.
Важно отметить, что наш код должен выполниться только тогда, когда будет загружена объектная модель документа (DOM), иначе преждевременная калькуляция высоты окна и документа может привести к очень странным результатам.
$(document).on('ready', function() {
var winHeight = $(window).height(),
docHeight = $(document).height(),
progressBar = $('progress'),
max, value;
/* Установка макисмальной длины прокручиваемой области */
max = docHeight - winHeight;
progressBar.attr('max', max);
$(document).on('scroll', function(){
value = $(window).scrollTop();
progressBar.attr('value', value);
});
});
Есть и другой способ заставить данный код выполниться только после полной загрузки документа – его надо поместить в конец разметки страницы.
В общем-то, это все, что нам нужно для создания индикатора прогресса чтения, который в равной степени будет хорошо работать во всех браузерах, поддерживающих HTML5 элемент progress.
-
Создано 09.10.2018 10:38:51
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.