Klizač - CSS-trikovi

Anonim

Kratka povijest oblikovanja klizača:

  1. Nekad je to samo Internet Explorer mogao raditi (drevne verzije) s takvim stvarima -ms-scrollbar-base-color. Ovi više ne postoje.
  2. Tada su se pretraživački motori temeljeni na WebKitu ubacili u takve stvari ::-webkit-scrollbar. To je ono što ovaj članak Alamanac uglavnom pokriva, jer danas djeluje u čitavom Safari / Chrome krajoliku.
  3. Standardi su se napokon uključili, a te mogućnosti oblikovanja pokrivaju nepredfiksirana svojstva poput boje pomicanja i širine trake za pomicanje.

Klizne trake za oblikovanje za svijet Safari / Chrome izložene su iza -webkitprefiksa dobavljača.

Ovaj unos u almanahu je pregled, za potpuniju raščlambu rada s prilagođenim klizačima, pročitajte ovaj članak o CSS-trikovima.

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-scrollbarObitelji nekretnina se sastoji od sedam različitih pseudo-elemenata koji zajedno čine potpunu pomicanje UI element:

  1. ::-webkit-scrollbarobraća se pozadini same trake. Obično je pokriven ostalim elementima
  2. ::-webkit-scrollbar-button adresira gumbe za usmjeravanje na traci za pomicanje
  3. ::-webkit-scrollbar-track obraća se praznom prostoru "ispod" trake napretka
  4. ::-webkit-scrollbar-track-piece je najgornji sloj trake napretka koji nije pokriven pomičnim elementom pomicanja (palac)
  5. ::-webkit-scrollbar-thumb obraća pomičnom elementu pomicanja koji mijenja veličinu ovisno o veličini pomičnog elementa
  6. ::-webkit-scrollbar-corner obraća se (obično) donjem kutu pomičnog elementa, gdje bi se mogle susresti dvije trake za pomicanje
  7. ::-webkit-resizerobraća se potezljivoj ručici za promjenu veličine koja se pojavljuje iznad scrollbar-cornerdonjeg kuta nekih elemenata

Pored ovih pseudo-elemenata, postoji i jedanaest klasa pseudo-selektora koje nisu potrebne, ali pružaju dizajnerima moć oblikovanja različitih stanja i interakcija korisničkog sučelja klizača. Potpuna raščlamba tih pseudo-selektora i detaljan primjer mogu se naći u ovom članku o CSS-trikovima.

Pogledajte ovu olovku!

Točke interesa

  • Ako ne postoji kvalificirani selektor koji prethodi raznim pseudo-elementima, stilovi će se primijeniti na bilo koju traku za pomicanje koja se može pojaviti na stranici.
  • Postavljanje -webkit-scrollbarstilova dobar je način da prisilite web stranicu da prikazuje vodoravne ili okomite klizače na verzijama Mac OS-a novijih od Liona, na kojima su klizači prema zadanim postavkama obično skriveni.
  • Budući da je ovo svojstvo iza -webkitprefiksa dobavljača, nekoliko dodataka za jQuery napisano je za "polifil" ili proširivanje ove funkcije na druge preglednike. Jedan od takvih dodataka je jScrollPane.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
91 * 87 11 88 * TP *

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 * Ne 81 * 14,0-14,4 *