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

Question

::-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-scroller，并且不会应用滚动条。如果我省略 .content，它会起作用，但随后也会应用于我不需要的其他区域。有什么想法如何仅针对一个特定元素吗::-webkit-scrollbar？

Answer 1

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

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

留出空间意味着您正在寻找容器的子级.content而不是容器本身。

jsFiddle