CSS: How can I change my custom scrollbar color based on the background colour

I am building a website which has both black as well as white backgrounds. My custom scrollbar is set to white by default which looks like this on a dark background:

enter image description here

But when the page has a white background, I need to change its color to black (or a shade of grey).

Here's the code for the scrollbar:

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

1 answer

  • answered 2021-06-19 03:10 Kinta

    You can use pageYOffset property on the window object in JavaScript and change CSS style according to the distance from the top page of the window