Стиль полосы прокрутки с помощью CSS в Google Chrome (-webkit) - PullRequest
Новая
       41

Стиль полосы прокрутки с помощью CSS в Google Chrome (-webkit)

27 голосов
/ 12 марта 2012

Может кто-нибудь помочь мне? Я хочу сделать простой стиль для полосы прокрутки. Я нашел некоторую информацию в интернете и попробовал ее, но, похоже, она не работает по некоторым причинам. Полоса прокрутки выглядит отлично при обновлении страницы, но как только вы касаетесь полосы прокрутки, она сходит с ума. Он наполнен множеством цветов, и вы не можете понять, что это полоса прокрутки.

Вот как это выглядит, прежде чем вы прикоснетесь к нему - http://i40.tinypic.com/a2evro.png

Вот как это выглядит после прикосновения к нему - http://i44.tinypic.com/qzkirn.png

Вот код, который я вставил в css: 

::-webkit-scrollbar {
width: 16px;
height: 16px; }

::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); }

Спасибо всем. Приветствия. Alex

1 Ответ

50 голосов
/ 12 марта 2012

Вот пример, который работает : 

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #000;
}

Или вы можете использовать jScrollPane .

...