将 webkit 滚动条样式应用于指定元素答案

【问题标题】：Apply webkit scrollbar style to specified element将 webkit 滚动条样式应用于指定元素
【发布时间】：2011-12-06 07:53:12
【问题描述】：

我不熟悉以双冒号为前缀的伪元素。我遇到了一篇博客文章，讨论了使用一些仅使用 webkit 的 css 来设置滚动条的样式。伪元素 CSS 可以应用于单个元素吗？

/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
    width: 12px;
}

/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
    width: 12px;
}

在这个小提琴中，我想自定义 div 的滚动条，但主窗口的滚动条保持默认。

http://jsfiddle.net/mrtsherman/4xMUB/1/

【问题讨论】：

标签： css webkit pseudo-element

【解决方案1】：

你的想法是正确的。但是，div ::-webkit-scrollbar 在div 后面加一个空格的符号实际上与div *::-webkit-scrollbar 相同；此选择器表示“<div> 内任何元素的滚动条”。使用div::-webkit-scrollbar。

在http://jsfiddle.net/4xMUB/2/查看演示

【讨论】：

注意不要在 div 和 ::-webkit 之间放置空格。我花了一段时间才知道为什么这不起作用，问题是空格。

【解决方案2】：

我想使用类选择器来使用自定义滚动条。

不知何故.foo::-webkit 不起作用，但我发现div.foo::-webkit 确实起作用！那些##$$*## 伪事物......

见http://jsfiddle.net/QcqBM/16/

【讨论】：

酷，感谢您的提示。可能另一件事会浪费我另一天两个小时的时间。
不再是真的
这行得通！尝试了多种方法让 webkit 规则在容器类中工作，但在前面添加元素标记以某种方式正确应用它。

【解决方案3】：

您也可以通过元素的 id 应用这些规则。假设 div 的滚动条必须设置样式，其 id 为“myDivId”。然后您可以执行以下操作。这样，您可以为不同元素的滚动条使用不同的样式。

#myDivId::-webkit-scrollbar {
    width: 12px;
}

#myDivId::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

#myDivId::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

http://jsfiddle.net/QcqBM/516/

【讨论】：

你能把它应用到类名上吗？

【解决方案4】：

您可以拥有一个 scss 文件并将样式应用于那里的类

style.scss

.myscrollbar {
  ::-webkit-scrollbar {
    width: 13px;
    height: 13px;
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(13deg, #f9d4ff 14%, #c7ceff 64%);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(13deg, #c7ceff 14%, #f9d4ff 64%);
  }
  ::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: inset 7px 10px 12px #f0f0f0;
  }
}

home.html

<div class="myscrollbar">
put your contents here
</div>

我在这里使用了滚动条生成器：https://w3generator.com/scrollbar

【讨论】：