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

Question

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

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

这是滚动条的代码：

<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;
}

Answer 1

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