Применить :: - webkit-scrollbar к одному конкретному элементу

Question

Im использует ::-webkit-scrollbar, чтобы преодолеть проблемы, когда пользователь быстро прокручивает условия на Android-устройстве. Большая часть остальной части проекта использует iScroll. Я просто хочу применить свойство ::-webkit-scrollbar к условиям div и нигде больше, поскольку iScroll используется везде. HTML является:

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

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

Я думал, что я мог бы сделать это в 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); 
} 

Но используя .content префикс, то WebKit-скроллер не применяется и не применяется не ScrollBar. Если я не укажу .content, он работает, но затем применяется к другим областям, где я этого не хочу. Любые идеи, как просто нацелиться на один конкретный элемент с помощью ::-webkit-scrollbar?

Answer 1

Удалить пространство между .content и ::-webkit:

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

Покидая место там означает, что вы ищете детей из .content, а не самого контейнера.

jsFiddle