Как изменить цвет полосы прокрутки с помощью css

Мой jsfiddle здесь
Я пытаюсь изменить цвет полосы прокрутки, но здесь он не работает.

Css:

.flexcroll {     
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}

Ответ 1

Вы можете использовать следующие атрибуты для webkit, которые попадают в тень DOM:

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Здесь работает скрипка с красной полосой прокрутки на основе кода этой страницы, объясняющего проблемы.

http://jsfiddle.net/hmartiro/Xck2A/1/

Используя это и ваше решение, вы можете обрабатывать все браузеры, кроме Firefox, которые в этот момент, я думаю, все еще нуждаются в решении javascript.

Ответ 2

Ваш css будет работать только в браузере IE. И css, предлагаемый hayk.mart, будет работать в браузерах webkit. И используя различные хаки CSS, вы не можете стирать полосы прокрутки браузеров с одинаковым результатом.

Итак, лучше использовать плагин jQuery/Javascript, чтобы получить решение с перекрестным браузером с тем же результатом.

Решение:

Используя jScrollPane плагин jQuery, вы можете достичь кросс-браузерного решения

См. это демо