CSS：如何根据背景颜色更改自定义滚动条颜色答案

【问题标题】：CSS: How can I change my custom scrollbar color based on the background colourCSS：如何根据背景颜色更改自定义滚动条颜色
【发布时间】：2021-09-03 07:59:44
【问题描述】：

我正在建立一个既有黑色背景又有白色背景的网站。我的自定义滚动条默认设置为白色，在深色背景上看起来像这样：

但是当页面有白色背景时，我需要将其颜色更改为黑色（或灰色阴影）。

这是滚动条的代码：

<style>
body {
    overflow: overlay;
}

::-webkit-scrollbar {
    width: 54px;
    mix-blend-mode: difference;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 14px 14px #fff;
border: solid 26px transparent;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 14px 14px #fff;
border: solid 24px transparent;
}

::-webkit-scrollbar-button {
    display: none;
}

【问题讨论】：

标签： html css wordpress scrollbar background-color

【解决方案1】：

您可以在 JavaScript 中使用 window 对象的 pageYOffset 属性，并根据与窗口顶部的距离来更改 CSS 样式

【讨论】：