scrollbar-gutterOminaisuus tarjoaa joustavuutta päättää, miten tila selain käyttää näyttää vierityspalkki, joka on vuorovaikutuksessa sisällön ruudulla. Spesifikaatio kuvaa sen "varaavan tilaa vierityspalkille", ja se on järkevää, koska juuri kouru on viime kädessä: kontti, joka varaa tilaa kaikelle, mikä siinä on, ja erottaa sen muista elementeistä.
Joten olemme kaikki samalla sivulla, vierityspalkki on se asia, joka tyypillisesti on selaimen oikealla puolella (jota kutsutaan virallisesti nimellä "käyttäjäagentti" - tai UA - spesifikaatiossa), joka osoittaa vierityspisteesi suhteessa kokonaismäärään käytettävissä olevaa tilaa verkkosivulla.
Ne ovat perinteisesti olleet visuaalinen säiliö, jossa on liukuva osoitin. Näitä kutsutaan klassisiksi vierityspalkeiksi . Ilmaisin istuu kourun sisällä ja kouru vie fyysisen kiinteistön näytölle, kun se näytetään.
Viime aikoina vierityspalkkien esiintymiset ovat kuitenkin suuntautuneet kohti jotain paljon vähäisempää. Kutsumme näitä päällekkäisiä vierityspalkkeja, ja ne ovat joko osittain tai kokonaan läpinäkyviä istuessaan sivun sisällön päällä. Toisin sanoen, toisin kuin klassiset vierityspalkit, jotka vievät fyysisen kiinteistön ruudulle, päällekkäiset vierityspalkit istuvat näytön sisällön päällä.
Kun olemme siinä, vierityspalkit voivat ponnahtaa muualle. Sen lisäksi, että istumme huuhtelemalla selaimen oikealla puolella, näemme vierityspalkit HTML-elementeissä, joissa sisältö ylittää elementin ja overflowominaisuus (tai overflow-xja overflow-y) on asetettu scrollarvoon. Ja huomaa, että overflow-xkeinojen olemassaolo vaaka- ja pystysuuntaisen vierityksen lisäksi.
Siitä me puhumme. Ei itse indikaattori, vaan kontti, joka sitä pitää. Se on kouru. Se, käyttääkö selain klassista vai päällekkäistä vierityspalkkia, riippuu täysin UA: sta. Se ei ole meidän päätös. Tämä pätee vierityspalkin leveydelle. Käyttäjäagentti määrittelee sen eikä anna meille mitään hallintaa sen suhteen.
Sieltä scrollbar-guttertulee sisään. Voimme kertoa, onko vesikouru klassisissa ja päällekkäisissä muunnelmissa.
Syntaksi
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Kaksoismerkki (&&) erottaa kaksi tai useampia komponentteja, joiden kaikkien täytyy esiintyä missä tahansa järjestyksessä.
Kysymysmerkki (?) Osoittaa, että edellinen tyyppi, sana tai ryhmä on valinnainen (esiintyy nolla tai yksi kerta).
Arvot
auto(alkuarvo): Melkein tähän mennessä kuvattu oletuskäyttäytyminen. Ominaisuuden asettaminen tähän arvoon sallii klassisten vierityspalkkien kuluttaa kiinteistöjä käyttöliittymässä elementeilleoverflow, joiden elementtien ominaisuudeksi on asetettuscrolltaiauto. Toisaalta päällekkäiset vierityspalkit eivät vie lainkaan tilaa istumalla elementin päälle.stable: Tämä lisää hieman mielipidekäyttäytymistä varaamalla aina tilaa vierityspalkkikourulle, kunhanoverflowsaman elementin ominaisuus on asetettuscrolltaiautoolemme tekemisissä klassisen vierityspalkin kanssa, vaikka ruutu ei olisikaan täynnä. Vastaavasti tällä ei ole vaikutusta peittokuvan vierityspalkkiin.always: Tämä toimii samalla tavalla,stablemutta varmistaa, että vierityspalkkikourulle varataan aina tilaa riippumatta siitä, onko vierityspalkki klassinen vai päällekkäinen, ja riippumatta siitä, onko sisältö täynnä vai ei.both: Tämä kertoo, että vierityspalkkikouru sijoitetaan elementin molemmille puolille, kun oletuskouru näytetään. Voit nähdä, kuinka tämä voi olla kätevää, jos suunnittelusi vaatii elementin molemmilta puolilta tasaisen välin.force: Tämä on sama kuin soveltaa sekästablejaalwaysjossa elementinoverflowasetetaanauto,scroll,visible,hiddentaiclip.
Teknisen esityksen luonnoksessa on erittäin kätevä taulukko, joka jakaa nämä määritelmät konteksteihinsa osoittaakseen heidän suhteensa klassisiin ja päällekkäisiin vierityspalkkeihin.
| Klassiset vierityspalkit | Peitä vierityspalkit | ||||
|---|---|---|---|---|---|
| ylivuoto | vierityspalkkikouru | Täynnä | Ei täynnä | Täynnä | Ei täynnä |
| vieritä | auto | G | G | ||
| vakaa | GM | G | |||
| aina | G | G | G | G | |
| auto | G | ||||
| vakaa | G | G | |||
| aina | G | G | G | G | |
| näkyvä, piilotettu, leike | auto | ||||
| vakaa | f? | f? | |||
| aina | f? | f? | f? | f? | |
“G” edustaa tapauksia, joissa tilaa on varattu vierityspalkkikourulle, ”f?” tapaukset, joissa tila on varattu vierityspalkin kourulle, jos voima on määritetty, ja tyhjät solut, joissa tilaa ei ole varattu.
Erittelyn tila
scrollbar-gutterOmaisuus on määritelty ylivuoto moduulitason 4, joka on luonnoksena tila. Tämä tarkoittaa, että tämä on edelleen kesken, ja se voi muuttua siitä hetkestä, kun luonnos siirtyy ehdokassuositukseen.
Ylivuotomoduulin tason 3 määrittely on myös työluonnos, joten se on hyvä osoitus siitä, että (1) scrollbar-guttersuositukseksi tuleminen vie jonkin aikaa ja (2) se on edelleen hyvin kesken.
Selaimen tuki
Selaintukea ei ole viimeisimmän päivityksen aikaan.
Lisää tietoa
- CSS-ylivuotomoduulin tason 4 työluonnos
- GitHub-numero 92
- TPAC: n CSS-työryhmä: Mitä uutta CSS: ssä on? Sisältää käsin piirretyn ehdotuksen taulukkoon, joka kuvaa ominaisuusarvojen käyttäytymistä.