Пользовательские полосы прокрутки Mixin онлайн урок.


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

Тем не менее Chrome и Internet Explorer (да) позволяют нам определять пользовательские стили для полос прокрутки. Однако синтаксис ужасно сложный и, конечно, определенно не стандартный. Добро пожаловать в фирменный мир. Вот почему вы можете захотеть немного микшировать, чтобы легко настраивать ваши полосы прокрутки. Правильно?

/// Mixin to customize scrollbars
/// Beware, this does not work in all browsers
/// @author Hugo Giraudel
/// @param {Length} $size - Horizontal scrollbar's height and vertical scrollbar's width
/// @param {Color} $foreground-color - Scrollbar's color
/// @param {Color} $background-color [mix($foreground-color, white, 50%)] - Scrollbar's color
/// @example scss - Scrollbar styling
/// @include scrollbars(.5em, slategray);
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
// For Google Chrome
::-webkit-scrollbar {
width: $size;
height: $size;
}

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

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

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

# Пример

@include scrollbars(.5em, slategray);

См. Pen Sass mixin для стилизации прокрутки Hugo Giraudel ( @HugoGiraudel ) на CodePen .

В обоих браузерах существует гораздо больше вариантов, чем только цвет и размер. Однако их часто упускают из виду, поэтому я не думаю, что стоит переполнять mixin этими параметрами. Не стесняйтесь создавать более продвинутый mixin с дополнительными опциями.
  • Дополнительные чтения:
  • Inset & amp; Индивидуальная полоса прокрутки WebKit
  • Пользовательские полосы прокрутки в Webkit