Как изменить скроллбар с помощью SASS/SCSS

Полоса прокрутки (скроллбар) – это один из тех компонентов пользовательского интерфейса, который встречается почти на каждой веб странице в сети, но несмотря на это, у нас (разработчиков) слишком мало контроля над этим элементом UI. Некоорые браузеры позволяют изменить внешний вид полосы прокрутки, но большинство браузеров, включая Firefox, не дают такой возможности.

Тем не менее, Chrome и Internet Explorer (да) позволяют добавлять пользовательские стили для скроллбаров, но синтаксис ужасно сложен и, конечно же, непривычен.

Возможно вы захотите воспользоваться этой небольшой SASS миксиной, чтобы с легкостью изменить свои полосы прокрутки.

// Миксина для изменения внешнего вида скроллбара
// Работает не во всех браузерах
// @param {Length} $size - Высота горизонтального и скроллбара и ширина вертикального
// @param {Color} $foreground-color - Цвет скроллбара
// @param {Color} $background-color [mix($foreground-color, white, 50%)] - Цвет скроллбара
// @example scss - Стили скроллбара
// @include scrollbars(.5em, slategray);

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%)) {

  // Для Chrome
  ::-webkit-scrollbar {
      width:  $size;
      height: $size;
  }

  ::-webkit-scrollbar-thumb {
      background: $foreground-color;
  }

  ::-webkit-scrollbar-track {
      background: $background-color;
  }

  // Для Internet Explorer
  body {
      scrollbar-face-color: $foreground-color;
      scrollbar-track-color: $background-color;
  }
}

Пример

@include scrollbars(.5em, slategray);

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

---

Перевод статьи Custom Scrollbar Mixin