От автора: вы когда-нибудь сталкивались с веб-сайтом с красивой полосой прокрутки и думали про себя: «Вау, как бы я хотел создать что-то подобное»? Я тоже! И после небольшого исследования я поняла, что создание пользовательской полосы прокрутки для вашего блога или личного портфолио не требует кучи CSS.
Сегодня мы создадим градиентный индикатор выполнения, который плавно меняется от нуля до 100% по мере прокрутки. Это руководство требует только базовых знаний HTML, CSS и JavaScript и в нем не будут использовать какие-либо фреймворки или библиотеки JavaScript. Вы можете найти полный код на CodePen!
Сначала создадим структуру нашего документа. Внутри редактора HTML CodePen давайте добавим два элемента: индикатор выполнения и контейнер выполнения.
Индикатор выполнения будет указывать, насколько далеко вниз прокрутил страницу пользователь. Контейнер индикатора выполнения будет занимать всю высоту страницы и содержать индикатор выполнения.
Давайте также добавим заголовок страницы с текстом «Добро пожаловать» и несколько абзацев lorem ipsem. Я добавила семь этих абзацев, но для краткости этого поста буду включать только один.
<h1>Welcome.</h1> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur provident eveniet veritatis ipsa id consectetur ab tenetur dolores eaque. Temporibus laboriosam cum corporis amet doloremque animi aut ipsa ea a? </p>
Теперь мы готовы добавить стили. Сначала давайте добавим базовый стиль страницы, чтобы наш сайт выглядел немного лучше.
body { background: #171414; font-family: "Courier New", Courier, monospace; color: #ffffff; padding: 15% 15% 5%;
} p { font-size: 1.8rem;
} p:first-of-type { margin-top: 100px;
} h1 { font-size: 200px; position: absolute; top: -5%; left: 15%; opacity: 25%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}Теперь давайте скроем полосу прокрутки браузера по умолчанию. Мы можем использовать вендорный префикс webkit, чтобы скрыть полосу прокрутки в Chrome и Safari.
::-webkit-scrollbar { width: 0; background: transparent;
}Нам нужно будет уделить особое внимание Firefox, поскольку он не является браузером webkit и не будет реагировать на вендорный префикс webkit (как, например, Chrome и Safari).
html { scrollbar-width: none;
}Теперь мы готовы создать собственную полосу прокрутки. Сначала давайте настроим наш контейнер полосы прокрутки. Мы хотим, чтобы контейнер полосы прокрутки был закреплен на правой стороне области просмотра, поэтому мы будем использовать position fixed со значениями top и right, установленными на 0. Мы зададим контейнеру прокрутки ширину десять пикселей и очень светло-серый фон.
#progressBarContainer { position: fixed; top: 0; right: 0; width: 10px; height: 100%; background: rgba(255, 255, 255, 0.05);
}Теперь вы должны увидеть контейнер прокрутки, появляющийся в правой части области просмотра. Наш индикатор выполнения также будет прикреплен к правой стороне области просмотра и будет иметь ширину десять пикселей, однако мы зададим ему линейный градиент от красного к фиолетовому, чтобы выделить его.
#progressBar { position: fixed; top: 0; right: 0; width: 10px; background: linear-gradient(to top, violet, red); height: 100%; opacity: 100%;
}Мы хотим динамически обновлять высоту и непрозрачность нашего индикатора выполнения при прокрутке, поэтому давайте установим высоту и непрозрачность на ноль.
#progressBar { position: fixed; top: 0; right: 0; width: 10px; background: linear-gradient(to top, violet, red); height: 0; opacity: 0;
}Чтобы обновить высоту и непрозрачность нашего индикатора выполнения, нам нужно написать несколько строк на JavaScript. Давайте сначала возьмем DOM-узел индикатора выполнения.
const progressBar = document.querySelector("#progressBar");Нам также нужно будет рассчитать общую высоту нашей веб-страницы. Мы можем рассчитать общую высоту, вычтя внутреннюю высоту окна из всей высоты прокрутки тела документа.
let totalPageHeight = document.body.scrollHeight - window.innerHeight;
Затем добавим в окно прослушиватель событий. Когда мы прокручиваем, мы хотим вычислить новую высоту прогресса. Мы можем рассчитать это, сначала разделив смещение страницы окна по оси Y на общую высоту страницы, чтобы получить десятичную дробь. Чтобы использовать это значение в коде CSS, мы должны умножить эту дробь на 100 (чтобы получить процент).
Наконец, мы можем установить высоту и непрозрачность индикатора выполнения на новую высоту выполнения.
window.onscroll = () => { let newProgressHeight = (window.pageYOffset / totalPageHeight) * 100; progressBar.style.height = `${newProgressHeight}%`; progressBar.style.opacity = `${newProgressHeight}%`;
};Заключение
И это все! Теперь у вас есть красивая настраиваемая полоса прокрутки всего в несколько строк CSS.
Автор: Emma Bostian
Источник: https://dev.to
Редакция: Команда webformyself.