Применить стиль прокрутки webkit к указанному элементу

Я новичок в псевдоэлементах с префиксом двойной двоеточия. Я наткнулся на статью в блоге, в которой обсуждался стиль полос прокрутки с использованием некоторого webkit только css. Можно ли применить псевдоэлемент CSS к отдельным элементам?

/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
    width: 12px;
}

/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
    width: 12px;
}

В этой скрипте я хотел бы сделать панель прокрутки div настроенной, но основная полоса прокрутки окна остается по умолчанию.

http://jsfiddle.net/mrtsherman/4xMUB/1/

Ответ 1

Ваша идея была верна. Однако обозначение div ::-webkit-scrollbar с пробелом после div фактически совпадает с div *::-webkit-scrollbar; этот селектор означает "полосу прокрутки любого элемента внутри <div>". Используйте div::-webkit-scrollbar.

Смотрите демонстрацию в http://jsfiddle.net/4xMUB/2/

Ответ 2

Я хочу использовать селектор классов для использования настраиваемой полосы прокрутки.

Как-то .foo::-webkit не работает, но я понял, что div.foo::-webkit работает! Эти ## $$ * ## псевдо-вещи....

См. http://jsfiddle.net/QcqBM/16/

Ответ 3

Вы также можете применять эти правила по идентификатору элемента. Пусть, скажем, полоса прокрутки div должна быть стилизована с идентификатором "myDivId". Затем вы можете сделать следующее. Таким образом, вы можете использовать разные стили для полос прокрутки разных элементов.

#myDivId::-webkit-scrollbar {
    width: 12px;
}

#myDivId::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

#myDivId::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

http://jsfiddle.net/QcqBM/516/