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

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


css webkit pseudo-element
person mrtsherman    schedule 12.10.2011    source источник

Ответы (4)


arrow_upward
108
arrow_downward

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

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

person duri    schedule 12.10.2011
comment
Будьте осторожны, чтобы не ставить пробелы между div и :: - webkit .. Мне потребовалось время, чтобы понять, почему это не работает, проблема заключалась в пробеле. - person Mohammed Noureldin; 20.01.2018

arrow_upward
39
arrow_downward

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

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

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

person Michel Löhr    schedule 22.05.2012
comment
Круто, спасибо за подсказку. Наверное, еще одна вещь, на которую я потратил бы два часа моего времени в другой день. - person mrtsherman; 22.05.2012
comment
Больше не правда - person Davi Lima; 18.07.2017
comment
Это работает! Пробовал несколько способов заставить правило webkit работать внутри класса контейнера, но добавление тега элемента впереди каким-то образом применяет его правильно. - person spiritworld; 04.06.2020

arrow_upward
12
arrow_downward

Вы также можете применить эти правила по идентификатору элемента. Скажем, необходимо стилизовать полосу прокрутки 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/

person Pratik Patel    schedule 18.12.2014
comment
Не могли бы вы применить это и к имени класса? - person URL87; 15.01.2017

arrow_upward
1
arrow_downward

У вас может быть файл scss и применить стиль к классу там

style.scss

.myscrollbar {
  ::-webkit-scrollbar {
    width: 13px;
    height: 13px;
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(13deg, #f9d4ff 14%, #c7ceff 64%);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(13deg, #c7ceff 14%, #f9d4ff 64%);
  }
  ::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: inset 7px 10px 12px #f0f0f0;
  }
}

home.html

<div class="myscrollbar">
put your contents here
</div>

Здесь я использовал генератор полосы прокрутки: https://w3generator.com/scrollbar

person turniprincess    schedule 08.01.2021