Slinkties juosta - CSS-gudrybės | CSS almanachas 2025

Trumpa slinkties juostų istorija:

Anksčiau tai buvo dalykas, kurį tik „Internet Explorer“ galėjo atlikti (senovinės versijos) su tokiais dalykais -ms-scrollbar-base-color. Tokių nebėra.
Tada „WebKit“ pagrindu veikiantys naršyklės varikliai pateko į tokius dalykus kaip ::-webkit-scrollbar. Tai dažniausiai apima šis „Alamanac“ įrašas, nes jis šiandien veikia visame „Safari“ / „Chrome“ peizaže.
Standartai pagaliau įsitraukė, o šias stiliaus parinktis apima priešdėlinės savybės, pvz., Slinkties juostos spalva ir slinkties juostos plotis.

„Safari“ / „Chrome“ pasaulio stiliaus juostelės rodomos už -webkitpardavėjo priešdėlio.

Šis almanacho įrašas yra apžvalga. Norėdami išsamiau apibūdinti darbą su pasirinktomis slinkties juostomis, perskaitykite šį CSS-Tricks straipsnį.

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-scrollbarSavybių šeima susideda iš septynių skirtingų pseudo-elementų, kad, kartu, sudaro visą slinkties UI elementas:

::-webkit-scrollbaradresuojamas pačios juostos fone. Paprastai jį apima kiti elementai
::-webkit-scrollbar-button adresai nukreipia mygtukus ant slinkties juostos
::-webkit-scrollbar-track nukreipia į tuščią vietą „žemiau“ eigos juostoje
::-webkit-scrollbar-track-piece yra aukščiausias eigos juostos sluoksnis, kurio neapima vilkamas slinkties elementas (nykštis)
::-webkit-scrollbar-thumb adresas yra tempiamas slinkties elementas, kurio dydis keičiamas atsižvelgiant į slenkančio elemento dydį
::-webkit-scrollbar-corner adresas (paprastai) apatinis slinktino elemento kampas, kur gali susitikti dvi slinkties juostos
::-webkit-resizeradresas yra vilkimo dydžio keitimo rankena, rodoma virš scrollbar-cornerkai kurių elementų apatinio kampo

Be šių pseudoelementų, taip pat yra vienuolika pseudo-selektoriaus klasių, kurios nereikalingos, tačiau suteikia dizaineriams teisę kurti įvairias slinkties juostos vartotojo sąsajos būsenas ir sąveikas. Išsamų tų pseudo selektorių išskaidymą ir išsamų pavyzdį galite rasti šiame CSS-Tricks straipsnyje.

Patikrinkite šį rašiklį!

Lankytinos vietos

Jei prieš įvairius pseudoelementus nėra kvalifikacinio parinkiklio, stiliai bus pritaikyti bet kuriai puslapyje esančiai slinkties juostai.
-webkit-scrollbarStilių nustatymas yra geras būdas priversti savo tinklalapį rodyti horizontalias arba vertikalias slinkties juostas naujesnėse nei „Lion“ „Mac OS“ versijose, kuriose slinkties juostos paprastai paslėptos pagal numatytuosius nustatymus.
Kadangi ši ypatybė yra už -webkitpardavėjo priešdėlio, keli „jQuery“ papildiniai buvo parašyti „polyfill“ arba išplėsti šią funkciją kitoms naršyklėms. Vienas iš tokių įskiepių yra „jScrollPane“.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.