html - 将::-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 的 children 而不是容器本身。

jsFiddle