Custom Scroll Bar for Div with pure CSS [duplicate

Question

This question already has an answer here:

• CSS customized scroll bar in div 14 answers

Is there a way to customize a scrollbar with only CSS that effects a specific div and not everything in the entire page?

I have found that I can use ::-webkit-scrollbar In order to change the style of a scrollbar, but this affects every scrollbar on the page.

I'm looking for a purely CSS way of styling a specific scroll bar on the page.

Is this possible?

Answer 1

It certainly is. All you have to do is keep in mind that ::-webkit-scrollbar is a pseudo-class, and as such, can be used like this:

div.foo::-webkit-scrollbar { ... }