HTML/CSS中同步滚动条控制对角线元素位置的教程

<div class="container">
  <h1>Gráfico de Demanda por Carne Moída</h1>
  <div id="chart">
    <div id="red-ball"></div>
    <div id="black-line"></div>
    <div id="blue-line"></div>
    <div id="x-axis">
      <span class="axis-label">6,292</span>
      <span class="axis-label">10,292</span>
      <span class="axis-label">14,292</span>
    </div>
    <div id="y-axis">
      <span class="axis-label">90</span>
      <span class="axis-label">140</span>
      <span class="axis-label">190</span>
    </div>
  </div>
  <div class="scroll-bar">
    <input type="range" id="scroll-bar1" min="100" max="200" value="150">
    <span id="scroll-bar-value1" class="scroll-bar-value"></span>
  </div>
  <div class="scroll-bar">
    <input type="range" id="scroll-bar2" min="0" max="400" value="200">
    <span id="scroll-bar-value2" class="scroll-bar-value"></span>
  </div>
  <!-- 其他滚动条略去 -->
</div>

.container {
  text-align: center;
}

#chart {
  position: relative;
  width: 450px;
  height: 450px;
  margin: 0 auto;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
}

#red-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg); /* 初始位置和旋转 */
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
}

#blue-line {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translateY(-50%) rotate(45deg); /* 初始位置和旋转 */
  width: 40%;
  height: 2px;
  background-color: blue;
}

/* 其他样式略去 */

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");

    // 将同一个更新函数绑定到两个滚动条的input事件
    scrollBar1.addEventListener("input", updatePos);
    scrollBar2.addEventListener("input", updatePos);

    // 初始调用一次，确保页面加载时元素位置正确
    updatePos(); 

    function updatePos() {
        // 计算红色小球的X轴和Y轴百分比位置 (受scrollBar1控制)
        // scrollBar1的范围是100到200，映射到0%到100%
        const xPercentage = (scrollBar1.value - 100) / (200 - 100);
        let leftBall = xPercentage * 100; // 红色小球的基础X位置

        const yPercentage = (scrollBar1.value - 100) / (200 - 100);
        const yPosition = yPercentage * 100; // 红色小球的Y位置

        // 计算蓝色线条的X轴百分比位置 (受scrollBar2控制)
        // scrollBar2的范围是0到400，映射到0%到100% (这里是反向映射)
        const blueLinePercentage = (scrollBar2.value - 400) / (0 - 400);
        const blueLinePosition = blueLinePercentage * 100;

        // 调整红色小球的X位置，使其追踪蓝色线条
        // 这里的 +20 和 -30 是为了视觉对齐而进行的经验性调整
        leftBall = leftBall + 20 - (blueLinePosition - 30); 

        // 应用计算出的位置
        redBall.style.top = `${yPosition}%`;
        redBall.style.left = `${leftBall}%`;
        blueLine.style.left = `${80 - blueLinePosition}%`; // 蓝色线条的最终X位置
    }
});