Ritjosla - CSS-triki | CSS almanahs 2025

Īsa ritjoslu veidošanas vēsture:

Agrāk tā bija lieta, ko tikai Internet Explorer varēja izdarīt (senās versijas) ar tādām lietām kā -ms-scrollbar-base-color. Tādu vairs nav.
Tad WebKit balstītie pārlūka dzinēji iekāpa ar tādām lietām kā ::-webkit-scrollbar. Tas galvenokārt attiecas uz šo Alamanac ierakstu, jo šodien tas darbojas visā Safari / Chrome ainavā.
Standarti beidzot ir iesaistījušies, un šīs stila iespējas aptver nepievienotas īpašības, piemēram, ritjoslas krāsa un ritināšanas joslas platums.

Safari / Chrome pasaules stila ritjoslas ir redzamas aiz -webkitpārdevēja prefiksa.

Šis almanaha ieraksts ir pārskats. Lai iegūtu pilnīgāku darbu ar pielāgotām ritjoslām, lūdzu, izlasiet šo CSS-Tricks rakstu.

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-scrollbarĪpašību ģimenes sastāv no septiņām dažādām pseido-elementiem, kas kopā un ietverot pilnīgu ritjoslu UI elementu:

::-webkit-scrollbarpievēršas pašas joslas fonam. Parasti to aptver citi elementi
::-webkit-scrollbar-button adresē ritināšanas joslas virziena pogas
::-webkit-scrollbar-track adresē tukšo vietu zem progresa joslas
::-webkit-scrollbar-track-piece ir progresa joslas augšējais slānis, ko neaptver velkamais ritināšanas elements (īkšķis)
::-webkit-scrollbar-thumb adresē velkamo ritināšanas elementu, kura izmērs mainās atkarībā no ritināmā elementa lieluma
::-webkit-scrollbar-corner adresē ritināmā elementa apakšējo stūri (parasti), kur var sastapt divas ritjoslas
::-webkit-resizeradresē velkamo izmēru maiņas rokturi, kas parādās virs scrollbar-cornerdažu elementu apakšējā stūra

Papildus šiem pseidoelementiem ir arī vienpadsmit pseido-selektoru klases, kas nav nepieciešamas, bet sniedz dizaineriem iespēju veidot dažādus ritjoslas lietotāja interfeisa stāvokļus un mijiedarbību. Pilnīgs šo pseido-atlasītāju sadalījums un detalizēts piemērs ir atrodams šajā CSS-Tricks rakstā.

Pārbaudiet šo pildspalvu!

Apskates vietas

Ja pirms dažādiem pseidoelementiem nav neviena atlasītāja, stili tiks lietoti jebkurai ritināšanas joslai, kas var parādīties lapā.
-webkit-scrollbarStilu iestatīšana ir labs veids, kā piespiest vietni rādīt horizontālas vai vertikālas ritjoslas Mac OS versijās, kas jaunākas par Lion, kurās ritināšanas joslas parasti tiek paslēptas pēc noklusējuma.
Tā kā šis rekvizīts atrodas aiz -webkitpārdevēja prefiksa, vairāki jQuery spraudņi ir rakstīti uz “polyfill” vai paplašina šo funkcionalitāti arī citās pārlūkprogrammās. Viens no šādiem spraudņiem ir jScrollPane.