Görgetősáv - CSS-trükkök

Anonim

A gördítősávok rövid története:

  1. Régebben csak az Internet Explorer tudott (ősi verziók) dolgozni hasonló dolgokkal -ms-scrollbar-base-color. Ezek már nem léteznek.
  2. 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.
  3. 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 -webkitszá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-scrollbartulajdonsá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:

  1. ::-webkit-scrollbarmaga a sáv hátterével foglalkozik. Általában a többi elem takarja
  2. ::-webkit-scrollbar-button a gördítősávon található iránygombokat címzi
  3. ::-webkit-scrollbar-track az előrehaladási sáv „alatt” lévő üres helyet címezi
  4. ::-webkit-scrollbar-track-piece a haladási sáv legfelső rétege, amelyet nem fed le a húzható görgető elem (hüvelykujj)
  5. ::-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
  6. ::-webkit-scrollbar-corner a görgethető elem (általában) alsó sarkát címezi, ahol két görgetősáv találkozhat
  7. ::-webkit-resizermegcélozza az áthúzható átméretező fogantyút, amely scrollbar-corneregyes 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-scrollbarstí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 -webkitszá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 *