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

时间:2014-08-20 10:54:05

标签: html css

当用户在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定位一个特定元素的任何想法吗?

1 个答案:

答案 0 :(得分:2)

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

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

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

jsFiddle