A gördítősávok rövid története:
- Régebben csak az Internet Explorer tudott (ősi verziók) dolgozni hasonló dolgokkal
-ms-scrollbar-base-color
. Ezek már nem léteznek. - Aztán a WebKit-alapú böngészőmotorok olyan dolgokkal kerültek a fedélzetre, mint például
::-webkit-scrollbar
. Ez az Alamanac bejegyzés többnyire lefedi, mivel manapság a Safari / Chrome tájon működik. - A szabványok végre bekapcsolódtak, és ezeket a stíluslehetőségeket olyan előtag nélküli tulajdonságok fedik le, mint a görgetősáv színe és a gördítősáv szélessége.
A Safari / Chrome világának gördítősávjai a -webkit
szállító előtag mögött láthatók.
Ez az almanach-bejegyzés áttekintést nyújt, az egyéni gördítősávokkal való munka teljesebb lebontásához olvassa el ezt a CSS-trükköket cikket.
body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )
A -webkit-scrollbar
tulajdonságok családja hét különböző álelemből áll, amelyek együttesen tartalmaznak egy teljes gördítősáv felhasználói felület elemet:
::-webkit-scrollbar
maga a sáv hátterével foglalkozik. Általában a többi elem takarja::-webkit-scrollbar-button
a gördítősávon található iránygombokat címzi::-webkit-scrollbar-track
az előrehaladási sáv „alatt” lévő üres helyet címezi::-webkit-scrollbar-track-piece
a haladási sáv legfelső rétege, amelyet nem fed le a húzható görgető elem (hüvelykujj)::-webkit-scrollbar-thumb
megcélozza a húzható görgethető elemet, amely átméretezhető a görgethető elem méretétől függően::-webkit-scrollbar-corner
a görgethető elem (általában) alsó sarkát címezi, ahol két görgetősáv találkozhat::-webkit-resizer
megcélozza az áthúzható átméretező fogantyút, amelyscrollbar-corner
egyes elemek alsó sarka felett megjelenik
Ezeken az álelemeken kívül még tizenegy álválasztó osztály létezik, amelyekre nincs szükség, de a tervezőknek hatalmat biztosítanak a gördítősáv felhasználói felületének különböző állapotainak és interakcióinak stílusához. Ezen álszelektorok teljes bontása és egy részletes példa megtalálható ebben a CSS-trükkök cikkben.
Nézze meg ezt a tollat!
Látványosság
- Ha a különböző álelemek előtt nincs minősítő választó, akkor a stílusok minden gördítősávra vonatkoznak, amely megjelenhet az oldalon.
- A
-webkit-scrollbar
stílusok beállítása jó módszer arra, hogy a weboldalt vízszintes vagy függőleges gördítősávok megjelenítésére kényszerítse a Mac OS Lionnál újabb verzióin, amelyeken a gördítősávok általában alapértelmezés szerint vannak elrejtve. - Mivel ez a tulajdonság egy
-webkit
szállító előtag mögött van , számos jQuery bővítményt írtak „polyfill” -re, vagy kiterjesztették ezt a funkciót más böngészőkre is. Az egyik ilyen plugin a jScrollPane.
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
Króm | Firefox | AZAZ | Él | Szafari |
---|---|---|---|---|
91 * | 87 | 11. | 88 * | TP * |
Mobil / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 * | Nem | 81 * | 14,0–14,4 * |