Плъзгачите са един от компонентите на потребителския интерфейс, които присъстват на почти всяка страница в интернет, но ние (разработчиците) имаме малко или никакъв контрол върху него. Някои браузъри ни дават възможност да персонализираме външния им вид, но за повечето браузъри, включително 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.
Отивайки по-нататък
И в двата браузъра има много повече опции, освен просто цвят и размер. Въпреки това, те често се пренебрегват, така че не мисля, че си струва да претрупваме миксина с тези опции. Чувствайте се свободни да създадете по-усъвършенстван миксин с допълнителни опции.
Допълнителни показания:
- Вградена и персонализирана лента за превъртане WebKit
- Персонализирани ленти за превъртане в Webkit
- Персонализирани ленти за превъртане за IE и Chrome, използващи CSS