Apply ::-webkit-scrollbar to one specific element

Question

Im using the ::-webkit-scrollbar to overcome problems when a user scrolls the terms and conditions very fast on an Android device. Most of the rest of the project uses iScroll. I just want to apply the ::-webkit-scrollbar property to the terms and conditions div and nowhere else as iScroll is used everywhere else. The html is:

<section class="content">
<h1>
    <strong>Terms & conditions</strong>
</h1>

<p>blah blah</p>
....
</section>

I thought I could do this in CSS:

.content ::-webkit-scrollbar {
    width: 5px; 
}

.content ::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.5);
}

.content ::-webkit-scrollbar-thumb {
    margin-right: 5px;
    border-radius: 5px;
    background: rgba(255,255,255,0.5);
}

But by using the .content prefix, the webkit-scroller is not applied and no scrollbar applies. If I leave out the .content, it works but is then applied to other areas too where I dont want it. Any ideas how to just target one specific element with ::-webkit-scrollbar?

Answer 1

Remove the space between .content and ::-webkit:

.content::-webkit-scrollbar {
    width: 5px; 
}

Leaving the space in there means you're looking for children of .content rather than the container itself.

jsFiddle