如何在HTML和CSS中让两个滚动条共享斜线图红球的Left位置

当前bug的核心是scrollBar1和scrollBar2各自独立计算并设置红球的left属性，导致两者操作互相覆盖，无法保持位置同步。根据需求，红球的X位置必须跟随蓝线，因此需要将红球的left属性控制权统一交给蓝线的控制逻辑，scrollBar1仅负责控制红球在斜线上的垂直位置（top属性），同时保持top与left的斜线关联关系。

修改后的JavaScript代码 #

document.addEventListener("DOMContentLoaded", function () {
    const scrollBar1 = document.getElementById("scroll-bar1");
    const scrollBar2 = document.getElementById("scroll-bar2");
    const redBall = document.getElementById("red-ball");
    const blueLine = document.getElementById("blue-line");

    // 同步蓝线与红球的X位置，并更新红球的Y位置
    function syncBlueLineAndBall() {
        const blueLinePercentage = (scrollBar2.value - 400) / (0 - 400);
        const blueLinePosition = blueLinePercentage * 100;
        
        // 更新蓝线位置
        blueLine.style.left = `${80 - blueLinePosition}%`;
        // 计算红球的X位置，保持与蓝线的固定偏移关系
        const ballLeft = 100 - blueLinePosition;
        redBall.style.left = `${ballLeft}%`;
        
        // 根据当前scrollBar1的值更新红球Y位置，保持斜线关系
        updateBallVerticalPosition(ballLeft);
    }

    // 根据红球当前X位置和scrollBar1的值，计算并更新Y位置
    function updateBallVerticalPosition(currentLeft) {
        const yRatio = (scrollBar1.value - 100) / (200 - 100);
        // 保持原逻辑的斜线关系，若需调整斜线角度可修改此公式
        const yPosition = yRatio * 100;
        redBall.style.top = `${yPosition}%`;
    }

    // 初始化位置
    syncBlueLineAndBall();

    // scrollBar1控制红球沿斜线的垂直位置
    scrollBar1.addEventListener("input", function() {
        const currentLeft = parseFloat(redBall.style.left);
        updateBallVerticalPosition(currentLeft);
    });

    // scrollBar2控制蓝线位置，同步红球X位置
    scrollBar2.addEventListener("input", syncBlueLineAndBall);
});

修改说明 #

1. 统一控制权：红球的left属性仅由scrollBar2的逻辑计算，彻底避免双滚动条的冲突。
2. 同步逻辑封装：将蓝线与红球的位置同步逻辑封装为函数，确保蓝线移动时红球X位置自动跟随。
3. 分离垂直控制：scrollBar1仅负责计算红球的top属性，基于当前X位置保持斜线关联，实现沿斜线移动的需求。
4. 初始化处理：页面加载时自动初始化所有元素位置，避免初始状态错位。

若需要调整红球沿斜线移动的角度，只需修改updateBallVerticalPosition函数中的yPosition计算逻辑，例如要让红球沿top = 100% - left的斜线移动，可将yPosition改为100 - currentLeft。

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