html - 滚动条没有采用正确的背景颜色

Question

参见:Demo

HTML

<div class="wrapper">
    <div class="content">
        <div class="element">some content</div>
        <div class="element">some content</div>
        <div class="element">some content</div>
        <div class="element">some content</div>
    </div>
</div>

CSS

body {
    background: green;
}
.wrapper {
    height: 200px;
    overflow-y: overlay;
}
.content {
    height: 1000px;
}
.element {
    background: blue;
}
.element:nth-child(even) {
    background: yellow;
}
::-webkit-scrollbar {
    width: 16px;
    z-index: 1000;
}
::-webkit-input-placeholder, ::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    border-radius: 16px;
    border: 4px solid transparent;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    -webkit-transition: background-color 0.1s ease;
    transition: background-color 0.1s ease;
}

正如您在演示中看到的那样，蓝色和黄色(.element)被正确渲染，并且滚动条超过了它，但是如何将滚动条的背景设置为蓝色(和黄色)。它只能在 Chrome 中运行(它将是 Chrome 应用程序)。

Answer 1

添加这个类来为滚动区域应用蓝色背景。

::-webkit-scrollbar{background-color:blue;}

DEMO