JavaScript原生视差滚动：初始居中背景滚动偏移问题求助

我完全懂你遇到的这个困扰——滚动一开始背景图就突然从居中位置跳到底部，这是因为你的JavaScript代码直接用计算出的Ypos覆盖了CSS里设置的background-position-y: 50%初始值，对吧？初始滚动时scrollY为0，计算出的Ypos通常是0px，一下子把原本的50%替换掉，自然会出现突兀的偏移。

下面给你两种简单有效的解决办法，都能完美保留初始居中状态，实现平滑的视差滚动：

方案一：用CSS变量 + calc()（推荐） #

这种方法最简洁，不需要处理复杂的像素转换，让浏览器帮我们计算初始位置和偏移量的叠加：

1. 修改CSS代码 #

给视差元素添加初始居中设置，并用CSS变量定义偏移量：

.parallax {
  /* 保留其他背景相关样式 */
  background-position: center; /* 初始水平垂直居中 */
  --parallax-y-offset: 0px;
  background-position-y: calc(50% + var(--parallax-y-offset));
}

2. 更新JavaScript代码 #

不再直接设置backgroundPositionY，而是动态更新CSS变量的值：

window.addEventListener('scroll', function() {
  const scrolled = window.pageYOffset;
  // 计算视差偏移量（这里的系数-0.5可以根据需求调整）
  const yOffset = scrolled * -0.5;
  document.querySelector('.parallax').style.setProperty('--parallax-y-offset', `${yOffset}px`);
});

这样初始状态下--parallax-y-offset为0px，calc(50% + 0px)就是我们想要的居中效果；滚动时只在初始居中位置上叠加偏移，完全不会有跳变。

方案二：纯JS计算初始像素位置 #

如果你不想用CSS变量，也可以先获取元素初始居中位置的像素值，再在这个基础上叠加视差偏移：

const parallaxElement = document.querySelector('.parallax');
// 获取初始的背景Y位置（转换为像素值）
const computedStyle = getComputedStyle(parallaxElement);
const initialYPercent = parseFloat(computedStyle.backgroundPositionY);
const initialYPx = (initialYPercent / 100) * parallaxElement.offsetHeight;

window.addEventListener('scroll', function() {
  const scrolled = window.pageYOffset;
  const yOffset = scrolled * -0.5;
  // 在初始像素位置上叠加偏移量
  parallaxElement.style.backgroundPositionY = `${initialYPx + yOffset}px`;
});

这个方法的核心是先把CSS里的50%转换成元素高度对应的像素值，滚动时只在这个初始值上做增减，避免直接替换导致的突变。

两种方法都能解决你遇到的问题，方案一代码更简洁易维护，推荐优先使用~

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