Создайте полосу прогресса прокрутки с использованием HTML, CSS и JavaScript

Введение

В этом практическом занятии (lab) мы рассмотрим, как создать полосу прогресса прокрутки с использованием HTML, CSS и JavaScript. Полоса прогресса прокрутки - это отличный способ показать текущую позицию пользователя на странице и сколько еще контента осталось просмотреть. К концу этого практического занятия вы лучше поймете, как реализовать эту функцию на своем веб - сайте.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 84%. Он получил 100% положительных отзывов от учащихся.

Полоса прогресса прокрутки

index.html и style.css уже предоставлены в виртуальной машине (VM).

Для создания полосы прогресса, которая показывает процент прокрутки веб - страницы, следуйте этим шагам:

Добавьте элемент div с id "scroll-progress" в HTML - код.
В CSS - коде установите position элемента в fixed, top в 0, width в 0%, height в 4px и цвет background в #7983ff.
Установите значение z - index большим числом, чтобы убедиться, что полоса прогресса находится вверху страницы и над любым контентом.
В JavaScript - коде выберите элемент scroll - progress с помощью метода document.getElementById().
Вычислите высоту веб - страницы по формуле document.documentElement.scrollHeight - document.documentElement.clientHeight.
Добавьте слушатель события к объекту window, который отслеживает событие scroll.
В функции слушателя события вычислите процент прокрутки документа по формуле (scrollTop / height) * 100.
Установите width элемента scroll - progress равным проценту прокрутки с помощью свойства style.

Вот код:

<div id="scroll-progress"></div>

#scroll-progress {
  position: fixed;
  top: 0;
  width: 0%;
  height: 4px;
  background: #7983ff;
  z-index: 10000;
}

const scrollProgress = document.getElementById("scroll-progress");
const height =
  document.documentElement.scrollHeight - document.documentElement.clientHeight;

window.addEventListener("scroll", () => {
  const scrollTop =
    document.body.scrollTop || document.documentElement.scrollTop;
  scrollProgress.style.width = `${(scrollTop / height) * 100}%`;
});

Нажмите на кнопку 'Go Live' в правом нижнем углу, чтобы запустить веб - сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы предварительно просмотреть веб - страницу.

Итог

Поздравляем! Вы завершили практическое занятие (lab) по созданию полосы прогресса прокрутки. Вы можете попрактиковаться в других практических занятиях в LabEx, чтобы улучшить свои навыки.