如何用jQuery计算元素滚动遍历百分比？用于自定义视差动画

这个需求我之前做视差动画的时候刚好遇到过，其实核心是理清几个关键的位置节点，然后计算元素在滚动过程中的相对位置占比。我给你拆解一下逻辑，再写个可用的函数：

核心逻辑拆解 #

首先得明确两个关键临界点：

• 0% 状态：元素顶部刚好触碰到视口底部，此时元素完全不可见
• 100% 状态：元素底部刚好离开视口顶部，此时元素完全不可见

整个滚动过程中，元素需要经过的总「有效滚动距离」是 视口高度 + 元素自身高度 —— 因为从0%到100%，元素总共移动了这么多像素的距离。

实现函数 #

下面是封装好的函数，直接传入目标元素就能返回当前的滚动遍历百分比：

function getScrollTraversalPercentage(element) {
  // 获取视口高度
  const viewportHeight = window.innerHeight;
  // 获取元素自身高度
  const elementHeight = element.offsetHeight;
  // 获取元素顶部相对于视口顶部的实时位置
  const elementTop = element.getBoundingClientRect().top;

  // 计算总有效滚动距离：视口高度 + 元素高度
  const totalScrollDistance = viewportHeight + elementHeight;
  // 计算当前元素相对于0%临界点的偏移量
  const currentOffset = viewportHeight - elementTop;

  // 计算百分比，并处理边界情况（避免超出0%-100%范围）
  let percentage = (currentOffset / totalScrollDistance) * 100;
  percentage = Math.max(0, Math.min(100, percentage));

  return percentage;
}

关键细节说明 #

• getBoundingClientRect() 是实时获取元素相对于视口的位置，滚动时会自动更新，非常适合做滚动相关的计算
• 边界处理用 Math.max(0, Math.min(100, percentage)) 确保百分比始终在0到100之间，避免动画出现异常
• 这个百分比的变化是线性的，如果你需要非线性的动画（比如缓入缓出），可以在返回值后套一个缓动函数，比如：

  // 示例：缓入缓出的二次贝塞尔曲线
  function easeInOutQuad(t) {
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  }
  // 使用时：
  const linearPercentage = getScrollTraversalPercentage(element);
  const easedPercentage = easeInOutQuad(linearPercentage / 100) * 100;
  

使用示例 #

你可以在滚动事件监听中调用这个函数，把百分比应用到视差动画上，比如改变元素的 translateY 或者 opacity：

const targetElement = document.querySelector('.parallax-element');

window.addEventListener('scroll', () => {
  const percentage = getScrollTraversalPercentage(targetElement);
  // 示例：让元素在滚动过程中向上移动自身高度的50%
  targetElement.style.transform = `translateY(${-percentage * 0.5}%)`;
  // 示例：让元素在滚动过程中从透明变为不透明再变回透明
  targetElement.style.opacity = percentage < 50 ? percentage / 50 : (100 - percentage) / 50;
});

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