Применить стиль полосы прокрутки webkit к указанному элементу - PullRequest
Новая
       33

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

60 голосов
/ 12 октября 2011

Я новичок в псевдоэлементах с префиксом двойного двоеточия. Я наткнулся на статью в блоге, в которой обсуждается стилизация полос прокрутки с использованием некоторого 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 ]

83 голосов
/ 12 октября 2011

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

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

27 голосов
/ 22 мая 2012

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

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

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

7 голосов
/ 18 декабря 2014

Вы также можете применять эти правила по 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/

...