UI-компоненты. Индикатор прокрутки страницы на JavaScript

Напишем индикатор прокрутки страницы с использованием JavaScript. Этот код создает фиксированную полосу в нижней части страницы и использует событие прокрутки для расчета процентной доли прокрутки страницы. Затем этот процент используется для установки ширины индикатора выполнения.

Реклама. ООО ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ. ИНН: 9705100963

Станьте JavaScript-разработчиком ⚡ За 6 месяцев вы освоите современный стек фронтенда — JavaScript, React, TypeScript, Node.js и Webpack. Научитесь писать и тестировать код, работать с API, создавать SPA-приложения и публиковать их онлайн. К концу курса соберёте собственный проект для портфолио и сможете уверенно претендовать на позицию Junior Frontend Developer.

Подробнее

HTML:

<div id="scrollIndicator">
  <div id="progress"></div>
</div>

📢 Подписывайтесь на наш Telegram-канал.

Там вы найдете анонсы обучающих статей и видео, готовый код для ваших проектов и увлекательные курсы. Ничего лишнего — только практика, вдохновение и развитие.

👉 https://t.me/codelab_channel

CSS:

body {
  min-height: 200vh;
}
#scrollIndicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: lightgray;
  overflow: hidden;
}

#progress {
  height: 100%;
  width: 0%;
  background-color: green;
}

JavaScript:

const scrollIndicator = document.querySelector("#scrollIndicator");
const progress = document.querySelector("#progress");

window.addEventListener("scroll", function () {
  const windowHeight =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  const windowScroll = document.documentElement.scrollTop;
  const progressPercentage = (windowScroll / windowHeight) * 100;

  progress.style.width = `${progressPercentage}%`;
});

Комментарии

Без регистрации и смс

Отменить ответ