Для отлавливания момента прокрутки можно использовать событие scroll.
Пример:
window.addEventListener("scroll", function () {
document.getElementById("someBlock").innerText = window.scrollY + "px";
});
Записывает в блок с id someBlock значение текущей прокрутки.
А вот с тегом progress все сложнее. Там надо знать всю высоту страницы, а это может быть проблематично.
Есть такой вариант:
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
Но и он может некорректно работать в зависимости от разметки.
После получения полной высоты страницы ее надо записать в атрибут max в прогрессбар, а по мере изменения прокрутки (событие scroll) изменять значение атрибута value.
Установка атрибутов производится так:
element.setAttribute(name, value);
element - элемент, которому необходимо установить атрибут
name - имя атрибута (строка).
value - значение атрибута.
Не забывайте нажать " ", поставить оценку и, если ответ удовлетворил, то выберите его как "Лучший"
Бодрого настроения и добра!
Успехов в учебе
