Стил лента за превъртане на webkit в определено състояние

Бих искал моите ленти за превъртане на WebKit да имат различен цвят, когато контейнерът му е надвисна. Искам цялата лента за превъртане да свети.

Мислех, че нещо подобно ще свърши работа (но не е):

.scroller:hover::-webkit-scrollbar {
  background: green;
}

Оформих лентите за превъртане по същия начин: на .scroller, не глобално. (Това работи: .scroller::-webkit-scrollbar) Искам препълнените divs специални, а не документа.

Друг (свързан) проблем: палецът светва, когато задържите курсора на мишката над лентата за превъртане. Това не работи:

.scroller::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb

css scrollbar webkit
person Rudie    schedule 26.12.2011    source източник

Отговори (2)


arrow_upward
7
arrow_downward

Промяната на цвета на фона работи добре за мен.

http://jsfiddle.net/QcqBM/1

div#container:hover::-webkit-scrollbar {
    background: lightyellow;
}

Сигурни ли сте, че няма нещо друго нередно с вашето CSS извикване?

person mrtsherman    schedule 26.12.2011
comment
Хъ, да... Това е някак това, към което се стремях: jsfiddle.net/rudiedirkx/QcqBM/ 2 А какво ще кажете за другия свързан проблем? Задръжте курсора на мишката над scrollbar, за да осветите scrollbar-thumb. (Използвах track вместо thumb няколко пъти, лошото ми.) - person Rudie; 26.12.2011
comment
Може би елементите на псевдо (лентата за превъртане) нямат състояния на задържане... Или йерархия. Това би било гадно. - person Rudie; 26.12.2011
comment
Промяната на цвета на палеца при задържане работи и при мен - jsfiddle.net/QcqBM/3 - person mrtsherman; 27.12.2011
comment
Това е на .scroller:hover. Искам цветът на палеца да се промени на scrollbar:hover. Но това ще изисква известна йерархия: .scroller::scrollbar:hover ::thumb и това не изглежда да работи. Или пак греша?? - person Rudie; 27.12.2011
comment
Съжалявам, сега най-накрая го разбрах. Не мисля, че това е възможно, защото псевдоелементите принадлежат на родителския елемент. Те не са йерархични един спрямо друг. Трябва да можете да го накарате да работи с javascript. Ето пример за използване на jQuery, за да получите ефекта, който искате. jsfiddle.net/QcqBM/6 - person mrtsherman; 27.12.2011
comment
Възможно е да постигнете всички тези неща с чист CSS. (Поне с Chrome версия 29.) Вижте отговора ми тук: stackoverflow.com/a/19171215/136590 - person Michael; 04.10.2013

arrow_upward
12
arrow_downward

Това е възможно с помощта на чист CSS, поне с Chrome версия 29.

http://jsfiddle.net/eR9SP/

За да стилизирате лентата за превъртане, когато нейният контейнер (в този случай .scroller) е поставен над нея, използвайте:

.scroller:hover::-webkit-scrollbar { /* styles for scrollbar */ }
.scroller:hover::-webkit-scrollbar-thumb { /* styles for scrollbar thumb */ }
.scroller:hover::-webkit-scrollbar-track { /* styles for scrollbar track */ }

Освен това можете да стилизирате самия палец на лентата за превъртане, когато е задържан над него или е активен (при щракване), като използвате следното:

.scroller::-webkit-scrollbar-thumb:horizontal:hover,
.scroller::-webkit-scrollbar-thumb:vertical:hover { /* hover thumb styles */ }
.scroller::-webkit-scrollbar-thumb:horizontal:active,
.scroller::-webkit-scrollbar-thumb:vertical:active { /* active thumb styles */ }
person Michael    schedule 04.10.2013
comment
Искам да подчертая палеца, когато задържите курсора на мишката над песента, което би изглеждало нещо като: .scroller::track:hover ::thumb, но псевдо елементите на лентата за превъртане нямат йерархия, така че мисля, че не е възможно. - person Rudie; 04.10.2013
comment
ААА разбирам. Да, изглежда, че това не е възможно с чист CSS. - person Michael; 04.10.2013
comment
Също така, това изглежда не работи за регулиране на ширината/височината на лентата за превъртане. Например: .scroller::-webkit-scrollbar:hover {background:yellow;width:20px} Ще промени цвета на фона на жълт при задържане, но ширината няма да се промени. - person diggie; 26.04.2014