Лента за превъртане - CSS-трикове

Кратка история на стилизиращите ленти за превъртане:

Преди беше нещо, което само Internet Explorer можеше да прави (древни версии) с подобни неща -ms-scrollbar-base-color. Те вече не съществуват.
След това базирани на WebKit двигатели за браузъри се качиха с неща като ::-webkit-scrollbar. Това е, което този запис на Alamanac покрива най-вече, тъй като днес работи в пейзажа на Safari / Chrome.
Най-накрая стандартите се включиха и тези опции за стилизиране са покрити от непредфиксирани свойства като цвят на лентата за превъртане и ширина на лентата за превъртане.

Стилиращите ленти за превъртане за света на Safari / Chrome са изложени зад -webkitпрефикса на доставчика.

Този алманах е преглед, за по-пълна разбивка на работата с персонализирани ленти за превъртане, моля, прочетете тази статия за CSS-трикове.

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семейството на свойства се състои от седем различни псевдо-елементи, които заедно съдържат пълен плъзгач UI елемент:

::-webkit-scrollbarадресира фона на самата лента. Обикновено се покрива от останалите елементи
::-webkit-scrollbar-button адресира бутоните за посока на лентата за превъртане
::-webkit-scrollbar-track адресира празното пространство "под" лентата на напредъка
::-webkit-scrollbar-track-piece е най-горният слой на лентата за напредъка, който не е покрит от плъзгащия се превъртащ елемент (палец)
::-webkit-scrollbar-thumb адресира плъзгащия се превъртащ елемент, който преоразмерява в зависимост от размера на скролиращия елемент
::-webkit-scrollbar-corner адресира (обикновено) долния ъгъл на скролиращия елемент, където могат да се срещнат две ленти за превъртане
::-webkit-resizerадресира плъзгащия се манипулатор за преоразмеряване, който се появява над scrollbar-cornerв долния ъгъл на някои елементи

В допълнение към тези псевдоелементи, има и единадесет класа псевдо-селектор, които не са задължителни, но предоставят на дизайнерите силата да стилизират различни състояния и взаимодействия на потребителския интерфейс на лентата за превъртане. Пълна разбивка на тези псевдоселектори и подробен пример могат да бъдат намерени в тази статия за CSS-трикове.

Вижте тази писалка!

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

Ако няма квалифициращ селектор преди различните псевдоелементи, стиловете ще се прилагат за всяка лента за превъртане, която може да се появи на страницата.
Задаването на -webkit-scrollbarстилове е добър начин да принудите уеб страницата си да показва хоризонтални или вертикални плъзгачи на версии на Mac OS, по-нови от Lion, на които плъзгачите обикновено са скрити по подразбиране.
Тъй като това свойство стои зад -webkitпрефикс на доставчик, няколко плъгина jQuery са написани за „polyfill“ или разширяват тази функционалност в други браузъри. Един такъв плъгин е jScrollPane.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.