Мы создадим индикатор прокрутки, как показано ниже.

Создание индикатора прокрутки, как показано выше, очень просто и требует всего несколько строк кода.

Мы начнем с определения html и css.

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Scroll Progress Indicator</title>
 </head>
 <body>
  <div class="header">
   <h1>Scroll Progress Indicator</h1>
   <div id="progress-bar" class="progress-bar"></div>
  </div>

  <div class="content">
   <div class="page" id="page-1">
    <h2>Page 1</h2>
   </div>
   <div class="page">
    <h2>Page 2</h2>
   </div>
   <div class="page">
    <h2>Page 3</h2>
   </div>
  </div>
  <script src="script.js"></script>
 </body>
</html>

стиль.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.body {
    width: 100vw;
}

.header {
    width: 100%;
    text-align: center;
    position: fixed;
    background-color: rgb(40, 40, 40);
    color: white;
}

.header>h1 {
    padding: 2rem 0;
}

.page {
    height: 100vh;
    background-color: rgb(233, 233, 233);
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-bar {
    height: .5rem;
    width: 0%;
    position: fixed;
    background-color: rgb(142, 0, 0);
}

Это просто шаблонный код для тестирования индикатора. Индикатор будет создаваться с использованием элемента div с идентификатором «progress-bar». Класс «прогресс-бар» состоит из фиксированной позиции, чтобы убедиться, что индикатор остается сверху, а ширина установлена ​​равной 0, что будет контролироваться с помощью javascript.

Страницы настроены только для того, чтобы добавить вертикальную прокрутку на страницу.

Теперь мы подошли к главному вопросу, коду javascript. Мы будем манипулировать шириной div, вычисляя процент каждый раз, когда происходит прокрутка. Это означает, что прослушиватель событий прокрутки будет прикреплен к окну. Теперь, как рассчитать процент ширины? Для этого нам нужны две вещи: общая высота документа и часть документа, которая уже была прокручена. Теперь для первой части нам на самом деле нужна часть документа, которая находится ниже области просмотра (экрана), потому что в начале ширина будет равна 0, и некоторая часть веб-страницы будет нам видна.

Это можно рассчитать, вычитая высоту области просмотра из полной высоты страницы.

let height = document.body.scrollHeight - window.innerHeight;

Вторая часть, часть документа, которая уже была прокручена, может быть просто получена с помощью

let scrollPosition = document.documentElement.scrollTop;

Остается только рассчитать проценты и задать ширину. Все объединенные коды выглядят так

const progressBarEl = document.getElementById("progress-bar");

window.addEventListener("scroll", () => {
 let height = document.body.scrollHeight - window.innerHeight;
 let scrollPosition = document.documentElement.scrollTop;
 let width = (scrollPosition / height) * 100;
 progressBarEl.style.width = `${width}%`;
});

И вуаля, у нас есть полностью отзывчивый рабочий индикатор прокрутки.

Пожалуйста, поделитесь в комментариях, что вы думаете о посте и есть ли у вас какие-либо сомнения.