Question

如何从单个HTML元素中删除CSS属性::-webkit-scrollbar？

在我的CSS文件中，我有这段代码：

::-webkit-scrollbar {
    width:  6px;
    height: 6px;
    background-color:transparent;
}
::-webkit-scrollbar-track {
    background-color:transparent;
    width: 6px;
}
::-webkit-scrollbar-track-piece  {
    background-color: blue;
}
::-webkit-scrollbar-thumb {    
    background-color: #d4dee8;
    width: 6px;
}

它将用webkit滚动条替换每个滚动条。但有两个地方我不需要webkit滚动条，我需要普通的滚动条。

HTML文件：

<td class="viewDialogLabel" height="21" style="width:156px;padding:0px"> 
    <!-- Inner elements --->
</td>

在这里，我需要将班级viewDialogLabel更改为普通滚动条。

我如何获得此效果？

Answer 1

WebKit支持方便的CSS值initial，它将属性设置回原来没有样式应用于页面时的值。

因此，您可以重置您设置的::-webkit-scrollbar值：

.viewDialogLabel::-webkit-scrollbar {
    width: initial;
    height: initial;
    background-color:initial;
}
.viewDialogLabel::-webkit-scrollbar-track {
    background-color:initial;
    width: initial;
}
.viewDialogLabel::-webkit-scrollbar-track-piece  {
    background-color: initial;
}
.viewDialogLabel::-webkit-scrollbar-thumb {    
    background-color: initial;
    width: initial;
}

请参阅http://jsfiddle.net/uVGKr/

WebKit也支持the :not() selector，所以我认为对原始CSS的以下修改会阻止自定义滚动条应用于该表格单元格：

:not(.viewDialogLabel)::-webkit-scrollbar {
    width:  6px;
    height: 6px;
    background-color:transparent;
}
:not(.viewDialogLabel)::-webkit-scrollbar-track {
    background-color:transparent;
    width: 6px;
}
:not(.viewDialogLabel)::-webkit-scrollbar-track-piece {
    background-color: blue;
}
:not(.viewDialogLabel)::-webkit-scrollbar-thumb {
    background-color: #d4dee8;
    width: 6px;
}

但是，它在Chrome 16中对我不起作用 - 根本不应用自定义滚动条样式（请参阅http://jsfiddle.net/uVGKr/1/）。如果你不能组合这些选择器，或者这是一个WebKit错误，我不确定我做错了什么。

根据您建议的编辑功能从CSS中移除td选择器，这似乎至少在Chrome 24中有效：http://jsfiddle.net/uVGKr/2/

Answer 2

您可以指定更准确的选择器：

.new-scrollbar::-webkit-scrollbar {
  /* ... */
}

然后，只有具有 new-scrollbar 类的元素才会拥有自定义滚动条。

或者您可以尝试覆盖特定元素中的属性：

.old-scrollbar::-webkit-scrollbar {
  background: none;
}

.old-scrollbar::-webkit-scrollbar-track {
  background: none;
}

/* ... */

同时尝试使用不同的属性/值。

Answer 3

您可以为这两个元素指定一个单独的类，而不是从这两个元素中删除这些属性，而是用新的元素覆盖-webkit-scrollbar样式

我们可以从单个节点中删除CSS属性“-webkit-scrollbar”吗？

3 个答案: