将:: - webkit-scrollbar应用于一个特定元素

Question

当用户在Android设备上非常快速地滚动条款和条件时，我使用::-webkit-scrollbar来克服问题。 项目的其余大部分都使用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-scroller，也不会应用滚动条。 如果我遗漏了.content，它可以工作，但是然后应用到我不想要的其他区域。 有关如何使用::-webkit-scrollbar定位一个特定元素的任何想法？

Answer 1

删除.content和::-webkit之间的空格：

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

离开那里的空间意味着你正在寻找.content 孩子而不是容器本身。

的jsfiddle