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.
В рабочем проекте спецификации есть очень удобная таблица, которая разбивает эти определения на их контексты, чтобы показать их связь с классическими и накладываемыми полосами прокрутки.
| Классические полосы прокрутки | Наложение полос прокрутки | ||||
|---|---|---|---|---|---|
| переполнение | полоса прокрутки-желоб | Переполненный | Не переполняется | Переполненный | Не переполняется |
| прокрутка | авто | грамм | грамм | ||
| стабильный | GM | грамм | |||
| всегда | грамм | грамм | грамм | грамм | |
| авто | грамм | ||||
| стабильный | грамм | грамм | |||
| всегда | грамм | грамм | грамм | грамм | |
| видимый, скрытый, клип | авто | ||||
| стабильный | е? | е? | |||
| всегда | е? | е? | е? | е? | |
«G» обозначает случаи, когда пространство зарезервировано для желоба полосы прокрутки, «f?» случаи, когда пространство зарезервировано для желоба полосы прокрутки, если была указана сила, и пустые ячейки - случаи, когда пространство не зарезервировано.
Статус спецификации
scrollbar-gutterСвойство определяется в уровне Переполнение модуля 4, который находится в рабочем состоянии проекта. Это означает, что эта работа все еще находится в стадии разработки и может измениться с настоящего момента до момента, когда проект перейдет в кандидатскую рекомендацию.
спецификация модуля переполнения уровня 3 также является рабочим проектом, так что это хороший показатель того, что (1) потребуется некоторое время, scrollbar-gutterчтобы стать рекомендацией, и (2) она все еще находится в стадии разработки.
Поддержка браузера
На момент последнего обновления браузер не поддерживал.
Дополнительная информация
- CSS Overflow Module Level 4 Рабочий проект
- GitHub, выпуск № 92
- Рабочая группа по CSS в TPAC: что нового в CSS? Включая нарисованное от руки предложение для таблицы с описанием поведения значений свойств.