Применить стиль полосы прокрутки 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/

3 52
css pseudo-element webkit

3 ответа:

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

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

75

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

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

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

22

вы также можете применить эти правила по id элемента. Допустим, полоса прокрутки 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/

5