Создание многоразовой настраиваемой полосы прокрутки
В этой статье мы научимся настраивать полосу прокрутки браузера по умолчанию с помощью элегантной и интерактивной настраиваемой полосы прокрутки с помощью директивы Angular.
Полоса прокрутки по умолчанию в div с переполненным содержимым отображается ниже.
Полоса прокрутки вверху навязчива и заметна. Для современных веб-приложений нам определенно нужно что-то тонкое, чтобы соответствовать философии дизайна и цветовой схеме приложения.
Мы будем стремиться создать настраиваемое и многократно используемое решение с использованием директивы Angular и некоторого настраиваемого CSS. Директива может использоваться во всем приложении.
Окончательный вид будет таким, как показано ниже.
Обратите внимание, что в состоянии покоя полоса прокрутки приглушена, почти полностью интегрирована с общим дизайном и цветовой схемой контейнера. Однако, когда пользователь взаимодействует с ним, он расширяется и позволяет пользователю прокручивать, не ища его.
Давайте наденем шляпу разработчика и сделаем это. 👷
app.component.html
содержит div со случайным текстом. Div оформлен с использованием пользовательского CSS через класс container
, чтобы получить эффект переполнения.
Обратите внимание на директиву атрибутов custom-scroll
, примененную к элементу div
. Используя эту директиву, мы вводим желаемое поведение в элемент хоста. Мы также используем эту директиву для прослушивания и реакции на действия пользователя в элементе хоста, чтобы обеспечить интерактивность настраиваемому скроллеру.
Для более глубокого понимания построения пользовательских директив, пожалуйста, ознакомьтесь с официальным руководством.
Затем давайте посмотрим на код директивы.
Обратите внимание на импорт из основной библиотеки.
ElementRef
предоставляет ссылку на базовый элемент HTML, к которому применяется директива. Это позволяет нам изменять поведение элемента во время выполнения путем внедрения стилей и классов.
HostListener
предоставляет возможность подписаться на события DOM в элементе размещения.
Используя декоратор @HostListener()
, директива подписывается на событие mousemove
в элементе размещения. Данные события mouseEvent
передаются методу обработчика applyCustomScroll()
.
Логика в applyCustomScroll()
методе довольно проста.
Используя метод JavaScript getBoundingClientRect()
, мы получаем положение хост-элемента относительно области просмотра. Из данных mouseEvent
положение курсора мыши по оси x выбирается с помощью его свойства clientX
. Затем эти данные используются для условного применения или удаления класса CSS custom-scroll-vertical-hover
к элементу хоста. Обратите внимание, что 10 вычитается из правого края основного элемента, который в конечном итоге будет размером полосы прокрутки.
Теперь осталось применить необходимый CSS к классу custom-scroll-vertical-hover
.
Вышеупомянутые стили включены в глобальный файл styles.css, поэтому директиву custom-scroll
можно применить к любому контейнеру в приложении, которому требуется аналогичное поведение.
По сути, мы переопределяем стили полосы прокрутки webkit; более конкретно большой палец и стиль дорожки. Когда ползунок находится в состоянии покоя, большой палец (2 точки) и дорожка (3 точки) используют прозрачную рамку, которая придает ему более тонкий вид. Тогда как в активном режиме, т.е. когда пользователь наводит курсор на него, директива custom-scroll
перехватывает событие и применяет класс custom-scroll-vertical-hover
. В этом случае ползунок и дорожка не используют границу, что, в свою очередь, увеличивает эффект полосы прокрутки. На самом деле его ширина всегда составляет 10 пикселей!
Вот и все! 🏆
Примечание. Настройка полосы прокрутки зависит от браузера. Не все браузеры позволяют изменять реализацию по умолчанию. Вышеупомянутое решение поддерживается только браузерами webkit - Chrome, Safari и Edge.
Внешний вид полосы прокрутки можно настроить в соответствии с потребностями, просто изменив цвета в файле style.css. Точно так же мы можем расширить решение для настройки горизонтальной полосы прокрутки, настроив таргетинг на -webkit-scrollbar-thumb:horizontal
и -webkit-scrollbar-track:horizontal
соответственно.
Надеюсь, эта статья оказалась для вас полезной. Не стесняйтесь использовать это в своем проекте.
Вы можете скачать исходный код этой статьи с github.