如何通过JavaScript更新background-position实现CSS分层背景视差滚动？

要实现分层背景图的Y轴位置随页面滚动动态变化，核心思路是监听滚动事件、计算滚动进度，再根据预设规则实时更新background-position属性。以下是具体实现方案：

基础代码结构 #

先设置页面基础样式，确保页面可滚动，同时定义初始分层背景：

body {
  margin: 0;
  min-height: 300vh; /* 让页面拥有足够滚动空间 */
  background-image: 
    url(img/bg-pattern-01.png),
    url(img/bg-pattern-02.png),
    url(img/bg-pattern-03.png);
  background-repeat: repeat-x; /* 横向重复背景，保持纵向位置可控 */
  background-position:
    center 45%,
    center 50%,
    center 55%;
}

JavaScript动态更新逻辑 #

通过监听滚动事件计算滚动进度，结合每个背景的基础位置和滚动响应系数，动态调整Y轴位置：

// 配置每个背景的基础位置和滚动响应幅度
const bgConfigs = [
  { baseY: 45, scrollFactor: 0.5 }, // 响应幅度小，滚动时移动慢
  { baseY: 50, scrollFactor: 1 },   // 完全跟随滚动比例移动
  { baseY: 55, scrollFactor: 1.5 }  // 响应幅度大，滚动时移动快
];

// 计算当前滚动进度（范围0-1）
function getScrollProgress() {
  const scrollTop = window.scrollY;
  const totalScrollable = document.documentElement.scrollHeight - window.innerHeight;
  return totalScrollable === 0 ? 0 : scrollTop / totalScrollable;
}

// 更新所有背景的位置
function updateBackgrounds() {
  const scrollProgress = getScrollProgress();
  // 生成每个背景的位置字符串
  const positionStrings = bgConfigs.map(config => {
    // 计算当前Y位置：基础值 + 滚动进度对应的偏移量 * 响应系数
    // 这里的50是自定义偏移范围，可按需调整
    const currentY = config.baseY + (scrollProgress * 50) * config.scrollFactor;
    return `center ${currentY}%`;
  });
  // 应用到body样式
  document.body.style.backgroundPosition = positionStrings.join(', ');
}

// 初始化时执行一次
updateBackgrounds();
// 监听滚动事件更新背景
window.addEventListener('scroll', updateBackgrounds);

优化与调整建议 #

• 视差效果调整：修改scrollFactor可控制背景滚动快慢——负数会让背景反向滚动，实现反向视差；值越大，背景随滚动的移动幅度越明显。
• 自定义混合规则：如果想要基础位置和滚动进度的平均效果，可修改currentY计算逻辑：

  const currentY = (config.baseY + scrollProgress * 100) / 2;
  

• 性能优化：滚动事件触发频率高，可通过防抖函数减少不必要计算：

  function debounce(func, delay = 15) {
    let timer;
    return () => {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    };
  }
  // 替换为防抖后的监听
  window.addEventListener('scroll', debounce(updateBackgrounds));
  

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