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

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 还支持 :not() 选择器，所以我认为对原始 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

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