CSS - 根据背景更改滚动条的背景颜色

Question

I have some dots (DIVs) lined up which link to each section of a single page website. They're in a fixed position so they scroll down as the user scroll down. However when I get to a section with a lighter background you can't see them, highlighted in the picture below:

What I'd like is for them to remain white but as the user scroll down, for the dots to change to dark grey instead. I do have multiple sections with lighter background so I need the dots to be able to "tell" when they're on a light background.

Is this even possible at all?

My HTML is:

<div class="pagination_dots">
    <div class="circle current"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

My CSS is:

.pagination_dots {
    position: fixed;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 20;
}

.pagination_dots .circle {
    margin-bottom: 14px;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    background: #fff;
    position: relative;
    cursor: pointer;
}

.pagination_dots .circle:after {
    content: '';
    display: inline-block;
    border: 1px solid rgba(196,163,105, 0);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
}

.pagination_dots .circle:hover:after,
.pagination_dots .circle.current:after {
    border: 1px solid rgba(196,163,105, 1);
}

Answer 1

You can usemix-blend-mode CSS -> difference value on the .pagination_dots element

From MDN, the mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

 .section { min-height: 25rem; }.section-black { background: #272526; }.section-grey { background: #F1F1F1; }.pagination_dots { position: fixed; top: 50%; left: 15px; transform: translateY(-50%); display: flex; flex-direction: column; z-index: 20; mix-blend-mode: difference; }.pagination_dots.circle { margin-bottom: 14px; border-radius: 50%; width: 9px; height: 9px; background: #fff; position: relative; cursor: pointer; }.pagination_dots.circle:after { content: ''; display: inline-block; border: 1px solid rgba(196, 163, 105, 0); border-radius: 50%; width: 18px; height: 18px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.5s; }.pagination_dots.circle:hover:after, .pagination_dots.circle.current:after { border: 1px solid rgba(196, 163, 105, 1); }

 <div class="section section-black"> </div> <div class="section section-grey"> </div> <div class="section section-black"> </div> <div class="pagination_dots"> <div class="circle current"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>