Ritjosla-notekas - CSS-triki

Anonim

scrollbar-gutterĪpašums nodrošina elastību, lai noteiktu, cik telpa pārlūkprogramma izmanto, lai parādītu ritjoslu, kas mijiedarbojas ar saturu uz ekrāna. Specifikācija to raksturo kā "vietas rezervēšanu ritjoslai", un tam ir jēga, jo galu galā tas ir tekne: konteiners, kas rezervē vietu jebkuram tajā esošajam un atdala to no citiem elementiem.

Tātad mēs visi atrodamies vienā lapā, ritjosla ir tā lieta, kas parasti atrodas pārlūkprogrammas labajā pusē (specifikācijā formāli tiek dēvēta par “lietotāja aģentu” vai UA), kas norāda jūsu ritināšanas pozīciju attiecībā pret kopējo pieejamā vieta vietnē.

Tie tradicionāli ir bijuši vizuāls trauks ar bīdāmu indikatoru. Tās tiek dēvētas par klasiskām ritjoslām . Indikators atrodas notekas iekšpusē, un tekne ekrānā aizņem fizisko nekustamo īpašumu, kad tas tiek parādīts.

Tomēr pēdējā laikā ritjoslu parādīšanās ir vērsta uz kaut ko daudz minimālāku. Mēs tos saucam par pārklājumu ritjoslām, un tie ir daļēji vai pilnībā caurspīdīgi, sēžot virs lapas satura. Citiem vārdiem sakot, atšķirībā no klasiskajām ritjoslām, kas ekrānā aizņem fizisko nekustamo īpašumu, pārklājošās ritjoslas atrodas ekrāna satura augšpusē.

Kamēr mēs esam pie tā, ritjoslas var parādīties citās vietās. Papildus tam, ka sēžat vienā līmenī ar pārlūka labo pusi, mēs redzēsim ritināšanas joslas HTML elementos, kur saturs pārpilda elementu, un overflowīpašums (vai overflow-xun overflow-y) ir iestatīts uz scrollvērtību. Un ņemiet vērā, ka tādu līdzekļu esamība, kas overflow-xmums ir horizontāla ritināšana papildus vertikālajai ritināšanai.

Par to mēs runājam. Ne pats indikators, bet konteiners, kas to tur. Tā ir notekcaurule. Tas, vai pārlūks izmanto klasisko vai pārklājošo ritjoslu, ir atkarīgs tikai no paša UA. Tas nav jāizlemj mums. Tas attiecas uz ritjoslas platumu. Lietotāju aģents to definē un mums to nekontrolē.

Tieši tur scrollbar-gutterienāk. Mēs varam precizēt, vai notekas ir klasiskās un pārklājošās variācijās.

Sintakse

.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )

Dubultā zīme (&&) atdala divus vai vairākus komponentus, kuriem visiem jānotiek jebkurā secībā.

Jautājuma zīme (?) Norāda, ka iepriekšējais tips, vārds vai grupa nav obligāti (notiek nulle vai viena reize).

Vērtības

  • auto(sākotnējā vērtība): gandrīz līdz šim aprakstītā noklusējuma uzvedība. Īpašuma iestatīšana uz šo vērtību ļauj klasiskām ritjoslām patērēt nekustamo īpašumu lietotāja saskarnē elementiem, kuros overflowšo elementu īpašums ir iestatīts uz scrollvai auto. Un otrādi, pārklājošās ritjoslas vispār neaizņem vietu, sēžot virs elementa.
  • stable: Tas pievieno nedaudz domātu uzvedību, vienmēr rezervējot vietu ritjoslas notekcaurulei, ja vien tā overflowpaša elementa īpašums ir iestatīts uz scrollvai autoun mums ir darīšana ar klasisku ritjoslu - pat ja lodziņš nav pārpildīts. Un otrādi, tas neietekmēs pārklājuma ritjoslu.
  • always: Tas darbojas tāpat kā, stablebet nodrošina, ka ritjoslas notekcaurulei vienmēr tiek rezervēta vieta neatkarīgi no tā, vai ritjosla ir klasiska vai pārklāta, un neatkarīgi no tā, vai saturs ir pārpildīts vai nē.
  • both: Tas norāda, ka ritināšanas joslas noteka tiks novietota abās elementa pusēs, kad tiks parādīta noklusējuma noteka. Jūs varat redzēt, kā tas varētu būt noderīgi, ja jūsu dizainam ir vajadzīgas vienādas atstarpes abās elementa pusēs.
  • force: Tas ir tas pats, kas, piemērojot gan stable, un alwayskur elements ir overflowir iestatīts auto, scroll, visible, hiddenvai clip.

Specifikācijas darba melnrakstam ir ļoti ērta tabula, kurā šīs definīcijas tiek sadalītas to kontekstā, lai parādītu viņu saistību ar klasiskajiem un pārklājošajiem ritjoslām.

Klasiskās ritjoslas Pārklājiet ritjoslas
pārplūst ritjosla-notekas Pārpildīts Nav pārpildīts Pārpildīts Nav pārpildīts
ritiniet auto G G
stabils GM G
vienmēr G G G G
auto G
stabils G G
vienmēr G G G G
redzams, paslēpts, klips auto
stabils f? f?
vienmēr f? f? f? f?

“G” apzīmē gadījumus, kad vieta ir rezervēta ritjoslas notekcaurulei “f?” gadījumi, kad vieta ir rezervēta ritjoslas notekcaurulei, ja tika norādīts spēks, un tukšu šūnu gadījumi, kad nav vietas.

Specifikācijas statuss

scrollbar-gutterĪpašums tiek definēts pārpildes moduļa Level 4, kas ir darba melnraksta statuss. Tas nozīmē, ka tas joprojām ir nepabeigts darbs un varētu mainīties no brīža, kad projekts pāriet uz Kandidātu ieteikumu.

Pārpildes moduļa 3. līmeņa specifikācija ir arī darba melnraksts, tāpēc tas labi norāda, ka (1) paiet zināms laiks, scrollbar-gutterlīdz tas kļūs par ieteikumu, un (2) tas joprojām tiek ļoti izstrādāts.

Pārlūka atbalsts

Pēdējās atjaunināšanas laikā pārlūkprogramma netiek atbalstīta.

Vairāk informācijas

  • CSS pārpildes moduļa 4. līmeņa darba projekts
  • GitHub izdevums Nr. 92
  • CSS darba grupa TPAC: kas jauns CSS? Ieskaitot tabulas ar roku sagatavotu priekšlikumu, kurā aprakstīta rekvizītu vērtību uzvedība.