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

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

HTML:

Подпишитесь на наши Telegram-каналы — делимся полезными материалами, чтобы вы были в теме и ничего не пропустили.

💻 Code Lab — программирование простыми словами: статьи, видео, шаблоны и курсы для тех, кто учится и развивается в IT.
👉 t.me/codelab_channel

🔍📦 Device Hub — обзоры и подборки электроники: от наушников до ноутбуков. Сравниваем, советуем, помогаем выбрать.
👉 t.me/devicehub_channel

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

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}%`;
});

Комментарии

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

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