Однажды некоторые дизайнеры предоставят вам красивые макеты 🌠 и ... настраиваемые полосы прокрутки в стиле macOS, которые выглядят так:
Но может быть слева, меньше или больше, с разными отступами в зависимости от того, мобильный он 📱, настольный 🖥️ или экран телевизора 📺 Просите больше?
Но на самом деле ... настройка полос прокрутки остается неизменной с конца 90-х годов. Если бы мой отец занимался программированием, он бы весь день смеялся надо мной, пока я находил решение, которое сделало бы все универсальным и стабильным. Это 2020 год, и это все еще PITA.
Родная поддержка
✅ Webkit и Blink
::-webkit-scrollbar {}
::-webkit-scrollbar-button {}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-track-piece {}
::-webkit-scrollbar-thumb {}
::-webkit-scrollbar-corner {}
::-webkit-resizer {}
Это означает, по крайней мере, что он работает в Chrome, Safari, Opera, Edgium (Edge на основе WebKit для iOS и Blink для Android, Windows и MacOS) и менее известных, таких как Vivaldi и другие.
Пример: https://jsfiddle.net/4yd7bg2r/1/
✅ Геккон
С момента выпуска Firefox 64 теперь доступна настройка полосы прокрутки.
Напоминаю, что изначальная ошибка была зафиксирована 18 лет назад, только менее года назад рассматривалась реализация CSS Scrollbars Module Level 1 😔.
Но у меня ничего не получается, когда вы пробуете этот кусок CSS:
.container {
scrollbar-color: rebeccapurple green;
scrollbar-width: 5px;
}
Проверьте это в своем FF, мой с этим не работает.
Пример: https://jsfiddle.net/beraliv/4yd7bg2r/14/
Однако если попробовать это, все работает отлично:
.container {
scrollbar-width: thin;
}
Более подробную информацию вы можете найти на MDN: ширина полосы прокрутки и цвет полосы прокрутки.
❌ связанные с трезубцем
Если вы с ним не знакомы, возможно, забудьте об этом. Это IE11. Такая боль везде. Может, совсем не поддерживаю?
Однако даже у него есть свойства CSS, которые могут помочь:
А еще свойство автоскрытие полосы прокрутки !!! Спасибо 🙏⚡
Другой - EdgeHTML, который является форком Trident и используется в старом Edge. В его бэклоге было только улучшение со средним приоритетом, чтобы добавить поддержку стиля полосы прокрутки. Но начиная с выпуска Edgium вы можете использовать псевдоэлементы Webkit / Blink 🎉.
CSS Хаки и хитрости
Медленно, но верно мы добиваемся того, чего хотим.
Полоса прокрутки слева
transform: https://jsfiddle.net/4yd7bg2r/5/ с отличной поддержкой
direction: https://jsfiddle.net/4yd7bg2r/6/ с неплохой поддержкой
Скрытие полосы прокрутки
overflow, margin и padding: горизонтальный https://jsfiddle.net/4yd7bg2r/8/ и вертикальный https://jsfiddle.net/4yd7bg2r/7/
Включите полосу прокрутки с помощью JS
Принимая во внимание тот факт, что FF, Edge и IE не поддерживают настройку полосы прокрутки, библиотека JS может быть для них неплохим решением.
Независимый от библиотеки
К сожалению, некоторые библиотеки являются плагинами для jQuery: jScrollPane, nanoScroller. И это не то, что может подойти.
Размер связки
Размер пакета JS полосы прокрутки того стоит. Однако это не то, что ожидалось.
lib / minified в КБ / minified + gzip в КБ
🕳️ размер черной дыры
нанокроллер / 94,2 / 32,4 (с jQ)
simplebar / 63,5 / 19 (с lodash, изменением размера полифилла наблюдателя и core-js)
iscroll / 32.1 / 8.3
perfect-scrollbar / 17.7 / 5.1
jscrollpane / 15.7 / 5.2
🤘 достаточно светлый < br /> nanoscroller / 8.31 / 2.89 (без jQ)
slim-scroll / 4.2 / 1.8
🔥 слишком хорошо, чтобы быть правдой
просто -полоса прокрутки / 2.3 / 0.97
Bundlephobia помогает оценить размеры связок.
Конечно, хорошие варианты - это легкие ванильные библиотеки.
Мобильная поддержка
Некоторые варианты, такие как простая полоса прокрутки, предоставляют полосы прокрутки, которые не подходят для мобильных устройств. Требуется добавить много функциональных возможностей, поэтому он не готов к производству.
Платформенный
Slim-scroll создается пользователем переполнения стека и направлен на улучшение дизайна в Windows. Это хорошо, потому что полоса прокрутки macOS хорошо смотрится везде. Однако собственная настройка доступна только в WebKit и Blink.
Мой последний выбор: попробовать perfect-scrollbar или simplebar.
Удачной недели 💪
Ваша реализация
Возможно, вы хотите настроить собственную полосу прокрутки. Сначала взгляните на механику полосы прокрутки.
Ссылки
⭐ ⭐️ Разработчики Google: Глубокое погружение в CSS: matrix3d () для настраиваемой полосы прокрутки Frame-Perfect
⭐⭐️️ CSDGN : Механика полосы прокрутки
⭐️ Уловки CSS: Пользовательские полосы прокрутки в WebKit
📄 MDN: Полосы прокрутки CSS
📄 W3School: Как создать собственную полосу прокрутки
📄 Переполнение стека: Скрыть полосу прокрутки, но с возможностью прокрутки
📄 Stack Overflow: Пользовательская полоса прокрутки CSS для Firefox
📄 Stack Overflow: Пользовательская полоса прокрутки CSS в div
Алексей Березин,
аспирант СПбГУ, магистр
Front-end разработчик от Яндекс
