Webkit Scrollbar Issue

[mintertweed]

Here is the website in question. I would like each project page to have a different color for the scrollbar. I thought this would be a simple thing to do, but I must be doing something wrong. For webkit browsers, I have this CSS for the scrollbar:

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #EBEBEB;
}

::-webkit-scrollbar {
    width: 10px;
    background-color: #EBEBEB;
}

::-webkit-scrollbar-thumb {
    background-color: #FF0066;
}

Fairly simple and to the point. Welp, to make it different for each of the project pages, I have a function in functions.php that gives each page its own class. So, for the page about “Digital Simulacra” it’s .page-digital-simulacra. So, one would assume I could put this…

.page-digital-simulacra ::-webkit-scrollbar-thumb {
    background-color: #B5B5B5;
}

…in there and it should change the scrollbar from a vibrant pink to a mild gray, but it’s not. What am I not doing correctly? Thank you in advance!

[Paulie_D]

Does it work without the space?

.page-digital-simulacra::-webkit-scrollbar-thumb {
    background-color: #B5B5B5;
}

[Paulie_D]

Of course the :: usually means the root so I’m not entirely sure you can achieve what you are after.

You might actually have to attach the class to the HTML element and not the body.

[mintertweed]

How would I code that?

Edit #1: And which one needs to be attached to the HTML element?

Edit #2: If you couldn’t tell, I know very little about this manner. I generated the scrollbar code through a coding website made specifically for that.

Edit #3: And no, to answer your question, it doesn’t work even if I remove the space.

Edit #4: And the code your directing me to is JavaScript to move the page down on page load. I don’t quite understand why it would be attached to that.

[Paulie_D]

I’m not “directing” you to any code. The image demonstrates (I think) that the :: tag is ‘linked’ to the html element (as that is what I have selected) and not the body or any classed version.

Is it even possible to add a class to the html element?

[mintertweed]

Yes, you can. It looks like by using Modernizr for WordPress, I might be able to apply a different class to the HTML element for different pages. I’ll have to look further into it.

Edit: Now, I just need to figure out how to add a different class for each page to the HTML element. Hrm.

[Author]

Posts