Застосувати стиль смуги прокрутки 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/

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

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

Я хочу використовувати селектор класів для користування спеціальною смугою прокрутки.

Якось .foo::-webkitне працює, але я зрозумів, що div.foo::-webkitце працює! Ті ## $$ * ## псевдо-речі ....

Див. Http://jsfiddle.net/QcqBM/16/

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

Ви можете мати файл 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