Полоски прокрутки - це один із тих компонентів інтерфейсу, який присутній майже на кожній сторінці Інтернету, проте ми (розробники) практично не контролюємо його. Деякі браузери дають нам можливість налаштувати їх зовнішній вигляд, але для більшості браузерів, включаючи 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