Клизач - ЦСС-трикови | ЦСС Алманац 2025

Кратка историја обликовања клизача:

Некада је то могао да ради само Интернет Екплорер (древне верзије) са таквим стварима -ms-scrollbar-base-color. Ови више не постоје.
Тада су се претраживачи засновани на ВебКит-у убацили у ствари попут ::-webkit-scrollbar. То је оно што овај чланак Аламанац углавном покрива, јер данас делује широм Сафари / Цхроме пејзажа.
Стандарди су се коначно укључили, а те опције стила покривају непрефиксирана својства попут боје клизача и ширине траке клизача.

Стајлинг клизача за Сафари / Цхроме свет изложен је иза -webkitпрефикса добављача.

Овај унос у алманаху је преглед, за потпунију рашчламбу рада са прилагођеним клизачима, прочитајте овај чланак о ЦСС-триковима.

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Породица особина се састоји од седам различитих псеудо-елемената који заједно чине потпуну сцроллбар УИ елемент:

::-webkit-scrollbarобраћа се позадини саме траке. Обично је покривен осталим елементима
::-webkit-scrollbar-button обраћа се смерним тастерима на траци за померање
::-webkit-scrollbar-track обраћа се празном простору „испод“ траке напретка
::-webkit-scrollbar-track-piece је горњи слој траке напретка који није покривен елементом за помицање који се може повући (палац)
::-webkit-scrollbar-thumb обраћа се елементу помицања који се може повући и чија се величина мијења у зависности од величине помичног елемента
::-webkit-scrollbar-corner обраћа се (обично) доњем углу помичног елемента, где би се могле наћи две клизаче
::-webkit-resizerобраћа се ручици за промену величине која се може повући која се појављује изнад scrollbar-cornerдоњег угла неких елемената

Поред ових псеудо-елемената, постоји и једанаест класа псеудо-селектора који нису потребни, али пружају дизајнерима моћ да стилизују различита стања и интеракције корисничког интерфејса клизача. Комплетна анализа тих псеудо-селектора и детаљан пример могу се наћи у овом чланку о ЦСС-триковима.

Погледајте ову оловку!

Тачке од интереса

Ако не постоји квалификовани селектор који претходи различитим псеудо-елементима, стилови ће се применити на било коју траку за померање која се може појавити на страници.
Постављање -webkit-scrollbarстилова је добар начин да приморате своју веб страницу да приказује хоризонталне или вертикалне клизаче на верзијама Мац ОС-а новијих од Лион-а, на којима су клизачи подразумевано сакривени.
Будући да се ово својство налази иза -webkitпрефикса добављача, неколико додатака за јКуери написано је за „полифил" или проширивање ове функције на друге прегледаче. Један од таквих додатака је јСцроллПане.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.