Недавно я работал над созданием нового дизайна для одного проекта. Брендинг сайта имел два основных цвета, и, хотя это не было предусмотрено дизайном, я решил изменить фон полосы прокрутки на основной цвет брендинга.
Это было лучше, чем стандартная полоса прокрутки браузера, но у меня возникла идея сделать ее еще лучше. Поэтому я решил сделать градиентную полосу прокрутки, используя два цвета брендинга. Но иметь большой палец прокрутки с градиентным фоном было недостаточно… поэтому я решил сделать его более интерактивным.
Моя идея заключалась в том, что по мере прокрутки фон листа прокрутки должен меняться, начиная с основного и заканчивая вторичными цветами брендинга.
Вот как я это сделал. Разумеется, это работает только в браузерах WebKit.
Сначала посмотрим на полосу прокрутки по умолчанию.
Я изменил ее на одноцветную полосу прокрутки.
:root {
--primary: #007ac3;
--secondary: #d2232a;
}
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
background-color: var(--primary);
border-radius: 10px;
border: 3px solid #fff;
}
Следующий шаг — создание градиента. Я установил градиентный фон на дорожку прокрутки.
:root {
--primary: #007ac3;
--secondary: #d2232a;
}
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-track {
background: linear-gradient(
to bottom,
var(--primary),
var(--secondary)
);
border-radius: 10px;
}
Затем я попытался создать палец прокрутки с «отверстием», чтобы открыть градиентный фон.
:root {
--primary: #007ac3;
--secondary: #d2232a;
}
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-track {
background: linear-gradient(
to bottom,
var(--primary),
var(--secondary)
);
border-radius: 0 10px 10px 0;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 10px;
border: 3px solid #fff;
}
Теперь осталось скрыть остальную часть дорожки прокрутки. Для этого я использовал очень большой контур на пальце прокрутки.
:root {
--primary: #007ac3;
--secondary: #d2232a;
}
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-track {
background: linear-gradient(
to bottom,
var(--primary),
var(--secondary)
);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 10px;
border: 3px solid #fff;
outline: 99999px solid #fff;
}
И вот окончательный результат
Если вам понравился этот небольшой совет, поделитесь им со своими друзьями…