如何用原生JavaScript根据滚动位置动态改变div背景色？

我正在制作一个网页，希望div元素能随用户向下滚动页面时改变背景色，且颜色能随滚动进度平滑过渡不同色调。我尝试使用window.onscroll，但难以获取合适的值实现平滑变色效果。能否有人展示如何用原生JavaScript实现该效果？提前致谢！

我尝试用window.onscroll检测滚动位置，然后修改div的backgroundColor。我基于window.scrollY计算颜色值，但发现颜色变化过于突兀。以下是我目前的代码片段：

window.onscroll = () => {
  const scrollPos = window.scrollY;
  const colorValue = Math.min(255, scrollPos / 5);  // Attempt to scale color with scroll
  document.getElementById('myDiv').style.backgroundColor = `rgb(${colorValue}, 100, 150)`;
};

预期效果：
我期望实现平滑过渡效果，背景色随页面滚动逐渐变化。目前颜色要么变化过快，要么跳转到非预期值。如果有更好的方法实现流畅自然的效果，我也愿意尝试不同的颜色过渡方式。

解决方案：基于滚动进度的平滑颜色过渡 #

要实现自然的平滑变色，核心是用滚动进度比例（而非绝对滚动距离）计算颜色，并结合更适合色调过渡的颜色模型，同时优化滚动事件的性能。

方法1：使用HSL颜色模型实现色调渐变

HSL的色相（H）值变化能直观实现不同色调的平滑过渡，比RGB更适合这类需求：

<!-- 测试用结构 -->
<div id="myDiv" style="height: 100vh; position: fixed; top: 0; left: 0; width: 100%;"></div>
<div style="height: 3000px;"></div>

const myDiv = document.getElementById('myDiv');
let ticking = false;

function updateBackgroundColor() {
  // 计算页面可滚动的总高度（文档总高度 - 视口高度）
  const totalScrollHeight = document.documentElement.scrollHeight - window.innerHeight;
  if (totalScrollHeight <= 0) return;

  // 计算滚动进度（0=顶部，1=底部）
  const scrollProgress = window.scrollY / totalScrollHeight;

  // 基于进度计算色相值：示例从红色(0°)过渡到蓝色(240°)，可自行调整范围
  const hue = scrollProgress * 240;

  // 设置HSL颜色，饱和度和亮度可按需调整
  myDiv.style.backgroundColor = `hsl(${hue}, 70%, 50%)`;

  ticking = false;
}

// 用requestAnimationFrame优化滚动事件，避免频繁触发卡顿
window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(updateBackgroundColor);
    ticking = true;
  }
});

方法2：RGB颜色的线性插值过渡

如果偏好RGB颜色，可以通过线性插值让每个颜色通道从起始值平滑过渡到目标值：

const myDiv = document.getElementById('myDiv');
let ticking = false;

function updateBackgroundColor() {
  const totalScrollHeight = document.documentElement.scrollHeight - window.innerHeight;
  if (totalScrollHeight <= 0) return;
  const scrollProgress = window.scrollY / totalScrollHeight;

  // 定义起始和目标RGB颜色
  const startR = 255, startG = 100, startB = 150;
  const endR = 100, endG = 150, endB = 255;

  // 线性插值计算当前颜色值
  const currentR = Math.round(startR + (endR - startR) * scrollProgress);
  const currentG = Math.round(startG + (endG - startG) * scrollProgress);
  const currentB = Math.round(startB + (endB - startB) * scrollProgress);

  myDiv.style.backgroundColor = `rgb(${currentR}, ${currentG}, ${currentB})`;

  ticking = false;
}

window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(updateBackgroundColor);
    ticking = true;
  }
});

关键优化点说明 #

1. 滚动进度比例：用scrollY / 总可滚动高度得到0-1的比例，确保颜色变化和页面长度无关，适配不同页面。
2. requestAnimationFrame：让颜色更新同步浏览器重绘节奏，避免滚动事件频繁触发导致的性能问题，过渡更流畅。
3. 颜色模型选择：HSL适合色调渐变，RGB适合固定色值间的平滑过渡，可根据需求选择。

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