На прошлом занятии мы создали основные стили веб страницы. Сегодня мы добавим новый элемент "полоску прокрутки", а также анимируем ее с помощью javascript.
Добавление полосы прокрутки для веб страницы
В структуре у нас уже есть специальный тег с селектором .scroll-bar, поэтому сразу перейдем к добавлению стилей. Полоса прокрутки будет находиться справа и посередине экрана в любой части нашей веб страницы. Реализуем это используя следующие свойства:
- position - Изменяем свойство позиционирования для элемента на "фиксированное".
- width - Ширина полоски прокрутки.
- height - Высота полоски прокрутки.
- border - Создаем границу для ее визуализирования.
- border-radius - Скругляем границу.
- right - Так как объект имеет измененное позиционирование на "зафиксированное" мы можем указать любую точку относительно видимой части экрана. В данном случае мы изменяем позиционирование относительно правой части экрана.
- top - Изменяем позиционирование относительно верхней видимой части экрана.
- transform - Точкой отсчета любого элемента на веб странице является верхний левый угол. Поэтому данным свойством мы смещаем эту точку отсчета на половину размера объекта, чтобы этот элемент расположился ровно по вертикальному центру веб страницы. *В будущем попробуйте открыть веб страницу без этого свойства и посмотрите на результат.
- --scrollbar-size - Создаем переменную в которую сохраним размер заполняемой области. *Эту область мы создадим позже.
*Что такое переменные мы рассказываем на наших курсах в школе программирования для детей КИДКОД. С промо кодом "дзен" вы получите 25% скидку на первый месяц обучения.
Проверяем текущий результат.
Далее с помощью псевдо контента мы добавим фон для созданной полоски прокрутки веб страницы. Этот фон мы будем увеличивать или уменьшать позже с помощью javascript.
- content - Для псевдо контента необходимо указывать это свойство, иначе мы не сможем определить псевдо контент в структуре.
- position, top, left - Позиционирование создаваемого псевдо элемента относительно родительского объекта - scroll-bar.
- width - Ширина 100% родительской ширины элемента scroll-bar
- height - Для высоты мы применим переменную (ранее созданную в основном селекторе). В будущем мы будем изменять это значение с помощью javascript создавая эффект увеличения или уменьшения заполняемости цветом полосы прокрутки.
- background-color - Цвет фона.
- transition - Свойство для добавления временной задержки между разными состояниями объекта. В данном случае мы будем отслеживать изменение высоты и проявлять эти изменения в течение половины секунды.
В качестве текущего результата вы увидите заполнение фоном на 5% от высоты полосы прокрутки. *Попробуйте изменить значение переменной --scrollbar-size в селекторе scroll-bar и проверить что произойдет.
Добавляем javascript
Чтобы использовать javascript нам необходимо добавить новый тег script в самый конец нашей веб страницы перед закрывающим тегом body. Сегодня мы не будем разбирать все примененные операции подробно, так как это займет слишком много времени текущего занятия. Позже мы дополнительно изучим свойства javascript и вы научитесь лучше понимать введенные операции.
- scrollBar - Находим на веб странице созданный элемент с селектором класса scroll-bar и сохраняем на него указатель.
- pageHeight - Определяем свойство высоты страницы. Это свойство потребуется для вычисления размера заполнения полоски прокрутки.
*Следующие операции мы будем писать после создания переменной pageHeight
Далее добавляем прослушку события - прокрутка веб страницы (scroll). При исполнении этого события мы будем вызывать безымянную функцию с аргументом event.
*Следующие операции мы будем писать внутри фигурных скобок созданной безымянной функции
При активации этого события мы будем вычислять текущее положение видимой части экрана по оси-у, а также рассчитывать новый размер для фона полосы прокрутки.
- scrollY - Вычисляем положение видимой части экрана по оси-у
- position - Рассчитываем сколько места занимает фон внутри полоски прокрутки. Тут очень важно применить свойство форматируемой строки и добавить знак % (процента).
- scrollBar.style.setProperty - Устанавливаем новое значение для переменной --scrollbar-size используя вычисленный ранее размер.
В качестве результата в данный момент времени вы можете увидеть увеличение или уменьшение размера фона для полосы прокрутки при перемещении страницы по вертикальной оси.
На следующем занятии мы научимся выкладывать создаваемые проекты в интернет, чтобы вы могли поделиться с вашими друзьями своими веб страницами.
