В 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 | ||
| стабилен | GM | G | |||
| винаги | G | G | G | G | |
| Автоматичен | G | ||||
| стабилен | G | G | |||
| винаги | G | G | G | G | |
| видим, скрит, клип | Автоматичен | ||||
| стабилен | е? | е? | |||
| винаги | е? | е? | е? | е? | |
„G“ представлява случаите, когато е запазено място за улея на плъзгача, „f?“ случаи, при които е запазено място за улея на плъзгача, ако е посочена сила, и случаи на празни клетки, когато не е запазено място.
Състояние на спецификацията
В scrollbar-gutterимота се определя в Overflow Модул 4-то ниво, което е в работния проект статус. Това означава, че това все още е в процес на работа и може да се промени от сега до момента, в който проектът преминава към препоръка за кандидат.
спецификацията за модул за препълване на ниво 3 също е работен проект, така че това е добра индикация, че (1) ще отнеме известно време, за scrollbar-gutterда се превърне в препоръка и (2) все още е в ход.
Поддръжка на браузър
По време на последната актуализация няма поддръжка на браузър.
Повече информация
- Модул за преливане на CSS Ниво 4 Работен проект
- GitHub Issue # 92
- Работната група за CSS в TPAC: Какво е новото в CSS? Включително ръчно изтеглено предложение за таблицата, очертаващо поведението на стойностите на свойствата.