滚动时根据背景切换分页点颜色的CSS实现方案咨询

要解决浅色背景下分页点对比度不足的问题，我们可以通过JavaScript监听页面滚动，判断当前视口内区块的背景亮度，动态切换分页点颜色，具体实现步骤如下：

1. 标记页面区块 #

先给单页网站的每个内容区块添加统一类名（比如page-section），方便后续定位和判断：

<!-- 示例区块结构，根据你的实际页面调整 -->
<section class="page-section" style="background-color: #ffffff;">第一区块</section>
<section class="page-section" style="background-color: #222222;">第二区块</section>
<section class="page-section" style="background-color: #f8f8f8;">第三区块</section>
<section class="page-section" style="background-color: #1a1a1a;">第四区块</section>

2. 添加深色分页点样式 #

在现有CSS代码基础上，新增深色状态的分页点样式：

/* 深色背景的分页点 */
.pagination_dots .circle.dark-circle {
    background: #333333; /* 深灰色，可根据需求调整色调 */
}

/* 当前激活的深色分页点 */
.pagination_dots .circle.current.dark-circle {
    background: #333333;
}

3. 编写JavaScript逻辑 #

通过滚动监听，判断当前视口内的区块，计算背景亮度后切换分页点样式：

// 判断元素是否处于视口核心区域（以视口中线为判断基准）
function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2;
}

// 计算颜色相对亮度（W3C标准公式）
function getColorLuminance(hexColor) {
    // 处理短格式十六进制颜色（如#fff转为#ffffff）
    hexColor = hexColor.replace(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b);
    // 提取RGB值并归一化
    const r = parseInt(hexColor.slice(1, 3), 16) / 255;
    const g = parseInt(hexColor.slice(3, 5), 16) / 255;
    const b = parseInt(hexColor.slice(5, 7), 16) / 255;
    // 计算相对亮度
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// 转换RGB颜色到十六进制格式
function rgbToHex(rgbColor) {
    const match = rgbColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    if (!match) return '#ffffff';
    return '#' + 
        ('0' + parseInt(match[1], 10).toString(16)).slice(-2) +
        ('0' + parseInt(match[2], 10).toString(16)).slice(-2) +
        ('0' + parseInt(match[3], 10).toString(16)).slice(-2);
}

// 更新分页点颜色
function updatePaginationDotColor() {
    const sections = document.querySelectorAll('.page-section');
    const paginationDots = document.querySelectorAll('.pagination_dots .circle');
    
    sections.forEach(section => {
        if (isElementInViewport(section)) {
            // 获取区块计算后的背景色
            const bgColor = window.getComputedStyle(section).backgroundColor;
            const hexColor = rgbToHex(bgColor);
            // 亮度大于0.5判定为浅色背景，切换分页点为深色
            const isLightBg = getColorLuminance(hexColor) > 0.5;
            
            paginationDots.forEach(dot => {
                dot.classList.toggle('dark-circle', isLightBg);
            });
        }
    });
}

// 初始化+监听滚动事件
window.addEventListener('load', updatePaginationDotColor);
window.addEventListener('scroll', updatePaginationDotColor);

关键细节说明 #

• 视口判断逻辑：示例以视口中线作为判断基准，你可以根据需求调整（比如判断区块是否占据70%以上视口）。
• 颜色亮度计算：采用W3C标准的相对亮度公式，亮度值>0.5时判定为浅色背景，确保分页点与背景的对比度符合可读性要求。
• 颜色格式兼容：代码兼容RGB和十六进制格式的背景色，不管背景是内联样式还是CSS类定义，都能正确获取颜色值。

内容的提问来源于stack exchange，提问作者Lewis Hardisty