Мы создадим индикатор прокрутки, как показано ниже.
Создание индикатора прокрутки, как показано выше, очень просто и требует всего несколько строк кода.
Мы начнем с определения 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}%`; });
И вуаля, у нас есть полностью отзывчивый рабочий индикатор прокрутки.
Пожалуйста, поделитесь в комментариях, что вы думаете о посте и есть ли у вас какие-либо сомнения.