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

Question

我排列了一些点（DIV），链接到单页网站的每个部分。 它们位于固定的 position 中，因此它们会随着用户向下滚动而向下滚动。 但是，当我到达背景较浅的部分时，您看不到它们，如下图突出显示：

我想要的是让它们保持白色，但当用户向下滚动时，这些点会变成深灰色。 我确实有多个背景较浅的部分，所以我需要这些点能够在它们处于浅色背景时“告诉”它们。

这有可能吗？

我的 HTML 是：

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

我的 CSS 是：

.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

您可以在.pagination_dots元素上使用mix-blend-mode CSS -> difference value

在 MDN 中， mix-blend-mode CSS 属性设置元素的内容应如何与元素的父元素的内容和元素的背景混合。

 .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>