scrollbar-gutterВластивість забезпечує гнучкість , щоб визначити , як простір браузер використовує для відображення смуги прокрутки , який взаємодіє з контентом на екрані. Специфікація описує це як "резервування місця для смуги прокрутки", і це має сенс, оскільки це, в кінцевому рахунку, і є жолоб: контейнер, який резервує місце для всього, що знаходиться в ньому, і відокремлює його від інших елементів.
Отже, ми всі на одній сторінці, смуга прокрутки - це те, що зазвичай знаходиться в правій частині браузера (формально в специфікації називається «агентом користувача» - або UA -), що вказує ваше положення прокрутки відносно загальної суми вільного місця на веб-сторінці.
Традиційно це візуальний контейнер із розсувним індикатором. Вони називаються класичними смугами прокрутки . Індикатор знаходиться всередині жолоба, і жолоб займає фізичну нерухомість на екрані, коли він відображається.
Однак останнім часом поява смуги прокрутки має тенденцію до чогось набагато мінімальнішого. Ми називаємо ці накладені смуги прокрутки, і вони частково або повністю прозорі, сидячи у верхній частині вмісту сторінки. Іншими словами, на відміну від класичних смуг прокрутки, які займають фізичну нерухомість на екрані, накладені смуги прокрутки розташовуються поверх вмісту екрана.
Поки ми це робимо, смуги прокрутки можуть з’являтися в інших місцях. Окрім того, що ми знаходимося праворуч від браузера, ми побачимо смуги прокрутки на елементах HTML, де вміст переповнює елемент, а overflowвластивість (або overflow-xі overflow-y) має scrollзначення. І зауважте, що існування засобів overflow-xозначає, що ми маємо горизонтальну прокрутку на додаток до вертикальної.
Це те, про що ми говоримо. Не сам індикатор, а контейнер, який його вміщує. Ось жолоб. Чи використовуватиме браузер класичну смужку прокрутки або накладання, повністю залежить від самої UA. Це не ми повинні вирішувати. Це стосується ширини смуги прокрутки. Агент користувача визначає це і не дає нам контролю над цим.
Ось де scrollbar-gutterвходить. Ми можемо пояснити, чи присутній жолоб у його класичних варіантах та накладеннях.
Синтаксис
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Подвійний амперсанд (&&) відокремлює два або більше компонентів, які повинні мати місце в будь-якому порядку.
Знак питання (?) Вказує на те, що попередній тип, слово або група є необов’язковим (трапляється нуль або один раз).
Цінності
auto(початкове значення): Практично поведінка за замовчуванням, описана на сьогодні. Встановлення цього значення для властивості дозволяє класичним смугам прокрутки використовувати споживання нерухомості в інтерфейсі користувача для елементів, для якихoverflowвластивість цих елементів має значенняscrollабоauto. І навпаки, накладені смуги прокрутки взагалі не займають місця, сидячи поверх елемента.stable: Це додає трохи самовпевненої поведінки, завжди резервуючи місце для жолоба смуги прокрутки, якщо дляoverflowвластивості того самого елемента встановлено значенняscrollабо,autoі ми маємо справу з класичною смугою прокрутки - навіть якщо поле не переповнено. І навпаки, це не вплине на смугу прокрутки накладеного зображення.always: Це діє так само, якstableі гарантує, що місце для жолоба прокрутки завжди зарезервовано, незалежно від того, класична смуга прокрутки чи накладена, і незалежно від того, переповнює вміст чи ні.both: Це говорить, що жолоб прокрутки буде розміщений по обидва боки елемента, коли буде показано жолоб за замовчуванням. Ви можете зрозуміти, як це може стати в нагоді, якщо ваш дизайн вимагає рівного відстані по обидві сторони елемента.force: Це те ж саме, застосовуючи якstableіalwaysде елементаoverflowвстановлений в положенняauto,scroll,visible,hiddenабоclip.
Робочий проект специфікації має надзвичайно зручну таблицю, яка розбиває ці визначення на їх контексти, щоб продемонструвати зв'язок між класичними та накладеними смугами прокрутки.
| Класичні смуги прокрутки | Накладіть смуги прокрутки | ||||
|---|---|---|---|---|---|
| переповнення | смуга прокрутки-жолоб | Переповнений | Не переповнюється | Переповнений | Не переповнюється |
| прокрутка | авто | G | G | ||
| стабільний | ГМ | G | |||
| завжди | G | G | G | G | |
| авто | G | ||||
| стабільний | G | G | |||
| завжди | G | G | G | G | |
| видимий, прихований, кліп | авто | ||||
| стабільний | f? | f? | |||
| завжди | f? | f? | f? | f? | |
"G" представляє випадки, коли місце для прорізу жолоба зарезервовано, "f?" випадки, коли для жолоба прокрутки зарезервовано місце, якщо була вказана сила, та випадки порожніх комірок, коли не зарезервовано пробіл.
Статус специфікації
scrollbar-gutterВластивість визначається в рівні Переповнення модуля 4, який знаходиться в робочому стані проекту. Це означає, що це все ще незавершена робота, і вона може змінитися з цього моменту до моменту переходу проекту до Рекомендації щодо кандидатів.
специфікація модуля переповнення рівня 3 також є робочим проектом, тому це є хорошим показником того, що (1) знадобиться деякий час, scrollbar-gutterщоб стати рекомендацією, і (2) це ще дуже багато.
Підтримка браузера
На момент останнього оновлення браузер не підтримує.
Більше інформації
- Модуль переповнення CSS, рівень 4, робочий проект
- Випуск GitHub # 92
- Робоча група CSS у TPAC: Що нового у CSS? Включаючи мальовану пропозицію до таблиці, що описує поведінку цінностей властивостей.