Как создать интерактивную градиентную полосу прокрутки

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

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

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

Вот как я это сделал. Разумеется, это работает только в браузерах 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;
}

И вот окончательный результат

Если вам понравился этот небольшой совет, поделитесь им со своими друзьями…