У цій статті ми поринемо у світ смуг прокрутки. Я знаю, це звучить не надто гламурно, але повірте мені, добре спроектована сторінка йде рука об руку з відповідною смугою прокрутки. Старомодна хромована смуга прокручування тут не дуже підходить.
Ми розглянемо найдрібніші деталі смуги прокрутки, а потім розглянемо кілька цікавих прикладів.
Компоненти смуги прокрутки
Насправді це скоріше відновлення. Є купа публікацій прямо тут, на CSS-Tricks які заглиблюються в деталі, коли справа доходить до спеціального стилю смуги прокрутки в CSS.
Щоб створити стиль смуги прокрутки, вам потрібно знати анатомію смуги прокрутки. Подивіться на цю ілюстрацію:
Тут слід пам’ятати про два основних компоненти:
- Команда трек це фон під смугою.
- Команда великий палець руки це частина, яку користувач клацає та перетягує.
Ми можемо змінити властивості повної смуги прокрутки за допомогою префікса постачальника::-webkit-scrollbar селектор. Ми можемо надати смузі прокрутки фіксовану ширину, колір фону, закруглені кути… багато чого! Якщо ми налаштовуємо головну смугу прокрутки сторінки, ми можемо використовувати ::-webkit-scrollbar безпосередньо в елементі HTML:
html::-webkit-scrollbar {
/* Style away! */
}Якщо ми налаштовуємо поле прокручування, це результат overflow: scroll, тоді ми можемо використовувати ::-webkit-scrollbar замість цього елемента:
.element::-webkit-scrollbar {
/* Style away! */
}Ось короткий приклад стилю смуги прокрутки елемента HTML так, щоб вона була широкою з червоним фоном:
Що робити, якщо ми хочемо лише змінити великий палець або доріжку смуги прокрутки? Ви здогадалися — у нас є спеціальні префіксовані псевдоелементи для цих двох: ::-webkit-scrollbar-thumb та ::-webkit-scrollbar-track, відповідно. Ось уявлення про те, що можливо, якщо ми поєднаємо всі ці речі разом:
Досить розчищати! Я хочу показати вам три ступені власного стилю смуги прокрутки, а потім відкрити велику демонстрацію прикладів, взятих з Інтернету для натхнення.
Прості та стильні смуги прокрутки
Спеціальна смуга прокрутки може бути мінімальною. Я зібрав групу прикладів, які непомітно змінюють зовнішній вигляд, чи то з незначною зміною кольору великого пальця чи доріжки, чи з легким стилем фону.
Як ви бачите, ми не повинні збожеволіти, коли мова йде про стиль смуги прокрутки. Іноді досить незначної зміни, щоб покращити загальну взаємодію з користувачем за допомогою смуги прокрутки, яка відповідає загальній темі.
Класні привабливі смуги прокрутки
Але давайте визнаємо це: весело трохи переборщити та проявити трохи творчості. Ось кілька дивних і унікальних смуг прокрутки, які в деяких випадках можуть бути «занадто великими», але вони точно привертають увагу.
Ще один…
Як щодо того, щоб взяти смугу прокрутки для обертання в поїзді за великий палець і доріжки для, ну, доріжки!
