Клизач-олук - ЦСС-трикови

Anonim

scrollbar-gutterИмовина даје флексибилност да се утврди како је простор бровсер користи за приказ клизача да интеракцију са садржајем на екрану. Спецификација га описује „резервисањем простора за клизач“ и то има смисла јер је то оно што је олук на крају и контејнер који резервише простор за оно што се налази у њему и одваја га од осталих елемената.

Дакле, сви смо на истој страници, трака за помицање је она ствар која је типично на десној страни прегледача (у спецификацији се формално назива „кориснички агент“ - или УА -) који означава вашу позицију помицања у односу на укупан број доступан простор на веб страници.

То су традиционално били визуелни контејнери са клизним индикатором. Они се називају класичним клизачима . Индикатор се налази унутар олука и олук заузима физичку некретнину на екрану када се приказује.

Међутим, у последње време појављивање траке са клизачем има тенденцију ка нечем много минималнијем. Те преклопне траке називамо клизачима и они су делимично или потпуно транспарентни док седе на врху садржаја странице. Другим речима, за разлику од класичних клизача који заузимају физичку некретнину на екрану, преклопни клизачи се налазе на врху садржаја на екрану.

Док смо код тога, клизачи се могу појавити на другим местима. Поред тога што ћемо седети у равни са десне стране прегледача, видећемо и траке за померање на ХТМЛ елементима где садржај преплављује елемент и overflowсвојство (или overflow-xи overflow-y) је постављено на scrollвредност. Имајте на уму да постојање средстава overflow-xзначи да имамо хоризонтално помицање поред вертикалног помицања.

О томе и причамо. Не сам индикатор, већ контејнер који га држи. То је олук. Да ли ће прегледач користити класични клизач или прекривајући клизач, потпуно зависи од саме УА. То није на нама да одлучимо. То важи за ширину клизача. Кориснички агент то дефинише и не даје нам никакву контролу над тим.

Ту 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.

Радни нацрт спецификације има супер практичну табелу која те дефиниције рашчлањује на њихов контекст како би показала однос који имају са класичним и прекривајућим клизачима.

Класични клизачи Прекривајући клизачи
преливање клизач-олук Преплављен Не преплављен Преплављен Не преплављен
свитак ауто Г. Г.
стабилно ГМ Г.
увек Г. Г. Г. Г.
ауто Г.
стабилно Г. Г.
увек Г. Г. Г. Г.
видљив, скривен, исечак ауто
стабилно ф? ф?
увек ф? ф? ф? ф?

„Г“ представља случајеве у којима је простор резервисан за олук клизача, „ф?“ случајеви у којима је резервисан простор за олук клизача ако је наведена сила, и случајеви празних ћелија у којима нема резерве.

Статус спецификације

scrollbar-gutterИмовина је дефинисана у поплаве Модуле Левел 4, који је у радном Нацрту статус. То значи да је ово још увек у току и могло би се променити од сада до тренутка када нацрт пређе на Препоруку кандидата.

спецификација нивоа 3 модула за преливање је такође радни нацрт, па је то добар показатељ да ће (1) требати неко време scrollbar-gutterда постане препорука и (2) да је још увек у току.

Подршка прегледача

У време последњег ажурирања не постоји подршка за прегледач.

Више информација

  • ЦСС Оверфлов Модуле Левел 4 Радна скица
  • ГитХуб издање # 92
  • ЦСС радна група у ТПАЦ-у: Шта је ново у ЦСС-у? Укључујући ручно нацртани предлог за табелу који приказује понашање вредности својстава.