На некоторых веб-сайтах, особенно в блогах, вы, вероятно, заметили этот эффект.

Пока вы прокручиваете страницу, читая статью, вы можете видеть индикатор выполнения, который растет по горизонтали пропорционально вертикальной прокрутке страницы.

Этот эффект очень легко реализовать, используя всего несколько строк HTML/CSS и JS, давайте приступим 🙌

Для части HTML мы можем создать div с прогрессом класса.

<div class='progress'></div>

и мы можем добавить несколько строк текста, чтобы мы могли прокручивать

(Совет: в VSCode вы можете генерировать случайный текст, используя lorem, за которым следует количество слов, которые вам нужны)

<p class='content'>lorem3000</p>

Теперь давайте добавим минимум CSS для оформления панели и абзаца.

body {
  margin: 0;
}
.content {
  margin: 0 auto;
  max-width: 700px;
  padding: 2rem;
}
.progress {
  background-color: orangered;
  height: 5px;
  width: 0px;
  position: fixed;
  inset: 0;
}

а теперь давайте поговорим о части JS..

Давайте на секунду резюмируем цель, которую мы хотим достичь:

Мы хотим, чтобы индикатор выполнения рос пропорционально прокрутке страницы, и мы хотим, чтобы он достигал 100% ширины экрана, когда мы подошли к прокрутке до нижней части страницы.

формула для достижения процента индикатора выполнения может быть рассчитана как:

progress = scroll * 100 / height

где

scroll = window.scrollY

и

height = document.documentElement.scrollHeight — window.innerHeight

(при расчете высоты мы хотим исключить высоту той части страницы, которая уже видна до того, как пользователь начнет прокручивать)

Теперь нам просто нужно обернуть эту логику в обработчик событий и вот результат 🎉

const progress = document.querySelector('.progress');
document.addEventListener('scroll', () => {
  const scroll = window.scrollY;
  const height = document.documentElement.scrollHeight - window.innerHeight;
  const progressWidth = Math.floor(100 * scroll / height);
progress.style.width = `${progressWidth}%`;
}, { passive: true })

Пожалуйста, не стесняйтесь использовать это в качестве отправной точки и внедряйте в него свои настройки.

Я надеюсь, что эта статья была полезной, и я желаю вам удачного кодирования!

До встречи в следующей статье 😎💻