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

滚动条没有采用适当的背景颜色

1 个答案: