Drsnik - CSS-triki | Almanah CSS 2025

Kratka zgodovina oblikovanja drsnih trakov:

Včasih je to lahko delal samo Internet Explorer (starodavne različice) s takimi stvarmi -ms-scrollbar-base-color. Te ne obstajajo več.
Nato so se v brskalnike, ki temeljijo na WebKit-u, pojavili stvari, kot so ::-webkit-scrollbar. To je tisto, kar ta vnos Alamanac večinoma pokriva, saj danes deluje v okolici Safari / Chrome.
Standardi so se končno vključili in te možnosti oblikovanja zajemajo neprefiksirane lastnosti, kot sta barva drsnika in širina drsnika.

Drsni trakovi za oblikovanje Safari / Chrome so izpostavljeni za -webkitpredpono prodajalca.

Ta vnos v almanah je pregled, za popolnejšo razčlenitev dela z drsniki po meri preberite ta članek CSS-triki.

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; )

-webkit-scrollbarDružina lastnostmi sestoji iz sedmih različnih psevdo-elementi, ki skupaj obsegajo celoten drsni UI element:

::-webkit-scrollbarnaslavlja ozadje same vrstice. Običajno ga pokrivajo drugi elementi
::-webkit-scrollbar-button naslovi smerne gumbe na drsniku
::-webkit-scrollbar-track naslavlja prazen prostor "pod" vrstico napredovanja
::-webkit-scrollbar-track-piece je zgornja plast vrstice napredovanja, ki je ni pokrit s pomičnim elementom, ki ga je mogoče povleči (palec)
::-webkit-scrollbar-thumb naslavlja drsni element, ki ga je mogoče povleči in se spremeni, odvisno od velikosti drsnega elementa
::-webkit-scrollbar-corner naslavlja (ponavadi) spodnji kot drsnega elementa, kjer se lahko srečata dve drsni trakovi
::-webkit-resizernaslavlja vlečni ročaj za spreminjanje velikosti, ki se prikaže nad scrollbar-cornerspodnjim vogalom nekaterih elementov

Poleg teh psevdoelementov obstaja tudi enajst razredov psevdo-izbirnikov, ki niso potrebni, vendar oblikovalcem omogočajo oblikovanje različnih stanj in interakcij uporabniškega vmesnika drsnika. Celotna razčlenitev teh psevdo-izbirnikov in podroben primer najdete v tem članku CSS-triki.

Oglejte si to pisalo!

Zanimivosti

Če pred različnimi psevdoelementi ni ustreznega izbirnika, bodo slogi veljali za vse drsne trakove, ki se lahko pojavijo na strani.
Nastavitev -webkit-scrollbarslogov je dober način, da prisilite svojo spletno stran, da prikaže vodoravne ali navpične drsne trakove v različicah Mac OS, novejših od Lion, na katerih so drsni trakovi običajno privzeto skriti.
Ker je ta lastnost za -webkitpredpono prodajalca, je bilo več vtičnikov jQuery napisanih za "polifil" ali razširitev te funkcije na druge brskalnike. Eden takih vtičnikov je jScrollPane.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.