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

Question

我对以双冒号为前缀的伪元素很陌生。我看到一篇博客文章讨论使用一些仅适用于 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/

Answer 1

你的想法是正确的。但是，在 div 后带有空格的符号 div ::-webkit-scrollbar 实际上与 div *::-webkit-scrollbar 相同;这个选择器的意思是“

内任何元素的滚动条”。使用div::-webkit-scrollbar。

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

Answer 2

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

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

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

Answer 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/

Answer 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