
Как изменить полосу прокрутки с помощью SASS/SCSS
14.06.2018
Полоса прокрутки (скроллбар) – это один из тех компонентов пользовательского интерфейса, который встречается почти на каждой веб странице в сети, но несмотря на это, у нас (разработчиков) слишком мало контроля над этим элементом 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);
See the Pen Sass mixin for scrollbar styling by Hugo Giraudel (@HugoGiraudel) on CodePen.
В обоих браузерах есть много вариантов для изменения размеров и цветов, но я не уверен, что они стоят того, чтобы захламлять ими миксину. Вы всегда можете поэксперементировать и создать свою собственную продвинутую миксину с большим количеством настроек.
Возможно, вам будет интересно:
SASS для Начинающих: Скачивание и Установка
SASS для Начинающих: Вложенные стили, Фрагменты, Импорт
Оригинальный текст: Custom Scrollbar Mixin