Širina klizača - CSS-trikovi

Anonim

scrollbar-widthNekretnina u CSS kontrolira širinu ili „debljina” od klizača. scrollbar-widthdio je nacrta modula klizača CSS radne grupe za razinu 1, koji je još uvijek u tijeku. Konsenzus u vrijeme pisanja ovog članka je da scrollbar-widthće vjerojatno biti uključen u buduće verzije CSS-a, ali postoji rasprava hoće li se dopustiti argument varijable ili će opcije biti ograničene na unaprijed zadane vrijednosti (više o onima kasnije) .

Prilagođavanje širine trake za pomicanje posebno je važno na stranicama ili u korisničkim sučeljima s ograničenim prostorom, gdje obrezivanje samo nekoliko piksela s klizača (ili njegovo potpuno uklanjanje) može sadržaju dati dovoljno prostora za dah, bez uklanjanja mogućnosti pomicanja.

Za jedan primjer, zamislite sučelje za uređivanje teksta gdje potrebe treba stati u kratki, uski spremnik. U takvoj situaciji traka za pomicanje može zauzeti velik dio raspoloživog prostora:

s scrollbar-width: auto;

Pomoću toga scrollbar-widthmožemo postaviti širinu na tako thinda uštedimo malo prostora:

.scrollable-element ( scrollbar-width: thin; )
textarea s scrollbar-width: thin;

Ili možemo postaviti širinu na noneda je u potpunosti uklonimo, štedeći još više prostora (pod pretpostavkom da smo u redu s nestajanjem klizača):

.scrollable-element ( scrollbar-width: none; )
textareasa scrollbar-width: none;- i dalje se možete pomicati!

Sintaksa

scrollbar-width: auto | thin | none | ;

Vrijednosti

scrollbar-width prihvaća sljedeće vrijednosti:

  • auto je zadana vrijednost i prikazat će standardne klizače za korisničkog agenta.
  • thin će reći korisničkom agentu da koristi tanje klizače, kada je to primjenjivo.
  • none će sakriti traku za pomicanje u potpunosti, bez utjecaja na pomicanje elementa.
  • raspravlja se, ali (ako se doda) bila bi maksimalna širina klizača.

Primjer

Podrška preglednika

Ovo je za ukupnu prilagodljivost klizača. Za najbolji ulog u oblikovanju klizača u pregledniku, pogledajte ovdje.

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 *

Povezano

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Resursi

  • Nacrt modula CSSWG klizača
  • W3C zbirka slučajeva korištenja za modifikaciju klizača
  • Budućnost CSS-a: klizači na razvoju za
  • w3c Github rasprava o kontroli širine klizača