JS视差效果：求滚动系数公式使背景图与内容同步触底

要解决固定系数导致的背景图底部不对齐问题，核心是根据背景图缩放后高度、main元素实际高度和页面可滚动总距离动态计算滚动比例，确保滚动到底部时背景图底部与main元素底部完全重合。

关键逻辑 #

当页面滚动到底部时，背景图需要向上移动的总距离 = 背景图缩放后的高度 - main元素的实际高度。将这个移动距离按滚动进度平均分配，即可保证全程背景图与页面底部的对齐关系。

修改后的完整代码 #

HTML（无需调整）

<header>
  <p>Header p content</p>
</header>
<main>
  <p>Main element 1</p>
  <p>Main element 2</p>
  <p>Main element 3</p>
  <p>Main element 4</p>
  <p>Main element 5</p>
  <p>Main element 6</p>
  <p>Main element 7</p>
  <p>Main element 8</p>
  <p>Main element 9</p>
</main>

CSS（保持原有布局）

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

header {
  height: 40%;
}

main {
  width: 100%;
  background-image: url("https://images.pexels.com/photos/30005397/pexels-photo-30005397/free-photo-of-colorful-macaws-perched-in-lush-cancun-jungle.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

main>* {
  width: 25em;
  height: 40em;
  background: gray;
  margin: 2%;
  font-size: 150%;
  align-content: center;
  text-align: center;
  color: blue;
}

JS（核心修改部分）

const main = document.querySelector("main");
let bgHeight = 0;

// 获取背景图原始尺寸，计算缩放后的高度
const imgSrc = getComputedStyle(main).backgroundImage.replace(/url\(['"]?(.*?)['"]?\)/, '$1');
const bgImg = new Image();
bgImg.src = imgSrc;
bgImg.onload = function() {
  updateBgHeight();
  updateBackgroundPosition();
};

// 窗口尺寸变化时重新计算背景高度
window.addEventListener('resize', function() {
  updateBgHeight();
  updateBackgroundPosition();
});

// 滚动时更新背景位置
document.body.onscroll = updateBackgroundPosition;

// 更新背景图缩放后的高度
function updateBgHeight() {
  const mainWidth = main.clientWidth;
  bgHeight = (bgImg.height / bgImg.width) * mainWidth;
}

// 计算并设置背景位置
function updateBackgroundPosition() {
  const scrollTop = document.scrollingElement.scrollTop;
  const mainHeight = main.offsetHeight;
  const totalScroll = document.documentElement.scrollHeight - window.innerHeight;

  // 背景图高度小于等于main高度时，无需视差效果
  if (bgHeight <= mainHeight) {
    main.style.backgroundPosition = "center 0";
    return;
  }

  // 动态计算背景移动距离，确保滚动到底部时对齐
  const totalBgMove = bgHeight - mainHeight;
  const yValue = (scrollTop / totalScroll) * totalBgMove;
  
  main.style.backgroundPosition = `center ${yValue}px`;
}

代码说明 #

1. 预加载背景图：通过Image对象获取背景图原始宽高，保证缩放后的高度计算准确。
2. 响应窗口变化：监听resize事件，在屏幕尺寸改变时重新计算背景高度，适配不同设备。
3. 动态适配滚动：根据当前滚动进度，按比例计算背景图移动位置，确保滚动到底部时背景图底部与main元素底部完全重合；若背景图高度不足main高度，则直接固定背景位置避免留白。

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