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

В этой статье мы научимся настраивать полосу прокрутки браузера по умолчанию с помощью элегантной и интерактивной настраиваемой полосы прокрутки с помощью директивы 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.