Question

我是伪元素的新手，前缀为双冒号。我遇到了一篇博客文章，讨论使用一些webkit only 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 ::-webkit-scrollbar之后带有空格的符号div实际上与div *::-webkit-scrollbar相同;此选择器表示“<div>内的任何元素的滚动条”。使用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＆＃34; myDivId＆＃34;的样式。然后你可以做以下。这样，您可以为不同元素的滚动条使用不同的样式。

#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

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

4 个答案: