Смуга прокрутки - CSS-хитрощі

Anonim

Коротка історія стилів смуг прокрутки:

  1. Раніше це міг робити лише Internet Explorer (давні версії) з подібними речами -ms-scrollbar-base-color. Вони вже не існують.
  2. Потім двигуни веб-переглядачів, що базуються на WebKit, потрапили до таких речей, як ::-webkit-scrollbar. Саме це в основному охоплює цей запис про Alamanac, оскільки сьогодні він працює в усіх регіонах Safari / Chrome.
  3. Нарешті стандарти долучились, і ці варіанти стилю охоплені нефіксованими властивостями, такими як колір смуги прокрутки та ширина смуги прокрутки.

Стильні смуги прокрутки для світу Safari / Chrome виставлені за -webkitпрефіксом постачальника.

Цей запис альманаху являє собою огляд, для більш повного розподілу роботи зі спеціальними смугами прокрутки прочитайте цю статтю CSS-Tricks.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

-webkit-scrollbarСімейство властивостей складається з семи різних псевдо-елементів , які разом містять повний елемент призначеного для користувача інтерфейсу прокрутки:

  1. ::-webkit-scrollbarзвертається до тла самої смуги. Зазвичай це охоплюється іншими елементами
  2. ::-webkit-scrollbar-button звертається до кнопок направлення на смузі прокрутки
  3. ::-webkit-scrollbar-track звертається до порожнього місця "нижче" індикатора прогресу
  4. ::-webkit-scrollbar-track-piece є самим верхнім шаром прогресу, який не охоплюється елементом прокрутки, який можна перетягнути (великий палець)
  5. ::-webkit-scrollbar-thumb звертається до елемента прокрутки, який можна перетягнути, розмір якого змінюється залежно від розміру елемента, що прокручується
  6. ::-webkit-scrollbar-corner звертається до (зазвичай) нижнього кута прокручуваного елемента, де можуть зустрічатися дві смуги прокрутки
  7. ::-webkit-resizerзвертається до ручки перетягування розміру, яка з’являється над scrollbar-cornerу нижньому куті деяких елементів

На додаток до цих псевдоелементів, існує також одинадцять класів псевдоселекторів, які не є обов’язковими, але надають дизайнерам можливість стилювати різні стани та взаємодії інтерфейсу смуги прокрутки. Повний опис цих псевдоселекторів та детальний приклад можна знайти в цій статті CSS-Tricks.

Перевірте цю ручку!

Цікаві місця

  • Якщо перед різними псевдоелементами немає відповідного селектора, стилі застосовуватимуться до будь-якої смуги прокрутки, яка може відображатися на сторінці.
  • Встановлення -webkit-scrollbarстилів - це хороший спосіб змусити вашу веб-сторінку показувати горизонтальні або вертикальні смуги прокрутки у версіях Mac OS, новіших, ніж Lion, на яких смуги прокрутки зазвичай приховані за замовчуванням.
  • Оскільки ця властивість стоїть за -webkitпрефіксом постачальника, декілька плагінів jQuery були написані для “polyfill” або розширили цю функціональність для інших браузерів. Одним з таких плагінів є jScrollPane.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
91 * 87 11 88 * TP *

Мобільний / планшетний

Android Chrome Android Firefox Android iOS Safari
88 * Ні 81 * 14,0-14,4 *