Создание пользовательской полосы прокрутки на CSS

Создание пользовательской полосы прокрутки на CSS

От автора: вы когда-нибудь сталкивались с веб-сайтом с красивой полосой прокрутки и думали про себя: «Вау, как бы я хотел создать что-то подобное»? Я тоже! И после небольшого исследования я поняла, что создание пользовательской полосы прокрутки для вашего блога или личного портфолио не требует кучи CSS.

Сегодня мы создадим градиентный индикатор выполнения, который плавно меняется от нуля до 100% по мере прокрутки. Это руководство требует только базовых знаний HTML, CSS и JavaScript и в нем не будут использовать какие-либо фреймворки или библиотеки JavaScript. Вы можете найти полный код на CodePen!

Сначала создадим структуру нашего документа. Внутри редактора HTML CodePen давайте добавим два элемента: индикатор выполнения и контейнер выполнения.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Давайте также добавим заголовок страницы с текстом «Добро пожаловать» и несколько абзацев lorem ipsem. Я добавила семь этих абзацев, но для краткости этого поста буду включать только один.

Теперь мы готовы добавить стили. Сначала давайте добавим базовый стиль страницы, чтобы наш сайт выглядел немного лучше.

Теперь давайте скроем полосу прокрутки браузера по умолчанию. Мы можем использовать вендорный префикс webkit, чтобы скрыть полосу прокрутки в Chrome и Safari.

Нам нужно будет уделить особое внимание Firefox, поскольку он не является браузером webkit и не будет реагировать на вендорный префикс webkit (как, например, Chrome и Safari).

Теперь мы готовы создать собственную полосу прокрутки. Сначала давайте настроим наш контейнер полосы прокрутки. Мы хотим, чтобы контейнер полосы прокрутки был закреплен на правой стороне области просмотра, поэтому мы будем использовать position fixed со значениями top и right, установленными на 0. Мы зададим контейнеру прокрутки ширину десять пикселей и очень светло-серый фон.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Теперь вы должны увидеть контейнер прокрутки, появляющийся в правой части области просмотра. Наш индикатор выполнения также будет прикреплен к правой стороне области просмотра и будет иметь ширину десять пикселей, однако мы зададим ему линейный градиент от красного к фиолетовому, чтобы выделить его.

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

Чтобы обновить высоту и непрозрачность нашего индикатора выполнения, нам нужно написать несколько строк на JavaScript. Давайте сначала возьмем DOM-узел индикатора выполнения.

Нам также нужно будет рассчитать общую высоту нашей веб-страницы. Мы можем рассчитать общую высоту, вычтя внутреннюю высоту окна из всей высоты прокрутки тела документа.

Затем добавим в окно прослушиватель событий. Когда мы прокручиваем, мы хотим вычислить новую высоту прогресса. Мы можем рассчитать это, сначала разделив смещение страницы окна по оси Y на общую высоту страницы, чтобы получить десятичную дробь. Чтобы использовать это значение в коде CSS, мы должны умножить эту дробь на 100 (чтобы получить процент).

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

Заключение

И это все! Теперь у вас есть красивая настраиваемая полоса прокрутки всего в несколько строк CSS.

Автор: Emma Bostian

Источник: https://dev.to

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.