Миксин пользовательских полос прокрутки - CSS-хитрости

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

Были внесены некоторые обновления и стандартизация стиля полос прокрутки. См. «Текущее состояние полос прокрутки стилей» для получения последних сведений, которые можно было перенести в миксин.

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

@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 & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )

Использование:

body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )

Пример

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

Идти дальше

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

Дальнейшие чтения: