87

我不熟悉以双冒号为前缀的伪元素。我遇到了一篇博客文章，讨论了使用一些仅使用 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/

4

4 回答 4

113

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

请参阅http://jsfiddle.net/4xMUB/2/上的演示

于 2011-10-12T17:22:04.857 回答
38

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

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

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

于 2012-05-22T06:09:06.553 回答
16

您还可以通过元素的 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/

于 2014-12-18T05:57:59.363 回答
2

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

样式.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;
  }
}

主页.html

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

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

于 2021-01-08T22:09:36.187 回答